SpapleGlype
New Member
I have a very weird problem and I can't figure out what I'm doing wrong. There are some details to fully understand this but the overall structure is pretty simple. I'm doing a Phonegap app (cordova 2.2.0 and jQuery 1.8.3) and all resources are local to the app. There are no remote resources being loaded here. This is only running on an iPad Safari at present.The problem I'm having (believe it or not) is that if I put my main CSS file in the css subdirectory (css is a siblng of www), the effect of using Javascript to change the \[code\]src\[/code\] attribute of an \[code\]img\[/code\] tag is delayed by about 2 seconds after page load. If I put the CSS file in the project root along with the HTML files, the \[code\]src\[/code\] assignment displays instantly on page load.So here's the structure of my project. There are currently 4 mostly duplicate HTML files that I'm working with in this scenario. In \[code\]<head>\[/code\] I have the following:\[code\]<head> <title>Question</title> <style type="text/css"> @import url(Question.css); </style> <script type="text/javascript" src="http://stackoverflow.com/questions/14616367/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/14616367/cordova-2.2.0.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/14616367/js/Question.js"></script></head>\[/code\]Later in these HTML files, I have 3-5 tags in each page that look like this:\[code\]<img src="http://stackoverflow.com/questions/14616367/img/Question-uncheck.png" class="answerCheck" id="chk1" />\[/code\]The ids are unique for each tag per page and the logic around checking/unchecking them works correctly.In my Javascript I need to set one of the checkboxes to "checked" on the loaded page so I have some business logic triggered off of \[code\]devReady\[/code\] that ultimately does this:\[code\]$('#'+sChk).attr('src', this.sSrcChecked);\[/code\]This logic always finds the correct \[code\]img\[/code\] to update and it always updates it with the correct image for the checked checkbox. So initially, all of the checkboxes are displayed unchecked, then I load some data from localStorage and "check" one of them using the above logic. The only problem is the delay.I inserted copious amounts of tracing/timing logic and I found that my JS finishes executing from the first point in \[code\]devReady\[/code\] to exiting \[code\]devReady\[/code\] in about 70-80 millis on device. And \[code\]body.onLoad\[/code\] to \[code\]devReady\[/code\] is taking about 30 millis. So all the JS seems to be finishing quickly and executing as expected.What I am seeing when running these pages is that the first page will load instantly, the JS executes, and the checkbox is checked nearly instantly (empirical observation). When I navigate to any subsequent page, the page loads nearly instantly, the JS executes, and finishes quickly, but the result of the \[code\]img.src\[/code\] change does not appear for almost 2 seconds. All subsequent pages behave exactly like the second one: delay in seeing the result of the JS work.This is if the Question.css file is in the "css" subdirectory. If I put Question.css in the root directory with the other HTML, all pages load and show the correct check instantly. I have changed this back and forth several times and I am not making any other changes.The only related question I could find is this one, but it appears to be dealing with remotely loaded images and not Phonegap.jQuery changing src with $(selector).prop takes a long timeNonetheless, I tried preloading the checked image using a hidden tag and it had no effect. Very weird problem. Any suggestions?