I’ve recently started building my first html based Air application using jQuery and have came across this very bizarre image issue. So here’s the scenario, I’ve got a text link with a image background attached with an onClick function, so when a click event occurred, the image background changes to another image. Now on a normal browser that would work fine but when I ran that in an air environment, the second image just wouldn’t load. I’ve double checked the syntax and even tried using a CSS class that contains the background image and using jQuery to add the class to the link upon onClick event. As expected that didn’t work!
After hours of testing and googling, I have came to a conclusion that jQuery can’t dynamically load images in an Air environment. So what I had to do was to pre-load all div elements with all the required classes on the page for the text link and that will pre-load all the images. Therefore when an onClick event occurs, the background images are displayed. Problem fixed!
Though this is not the best solution but developers should be keep this in mind when developing your Air application, because it would seriously affect how you’ll build/structure your application and could potentially save you hours of head scratching and frustration.
