javascript - Page Not Always Detecting when Image is Loaded -


I have a Ruby on Twitter app that uses Twitter Bootstrap.

On one page, a carousel that uses large images, until all the images are loaded, I show a loading GIF on the page.

Then, initially, GIF

  
div id = "loading-div" square = "centric" & gt; & Lt; Img src = "& lt;% = asset_path (" Page-loader .gif ")%>" / & Gt; & Lt; / Div & gt;

And after loading the page, to hide the carousel, wait for one of the images to load, then hide the GIF and show the carousel but Never , the event is called onload. Like when I have already visited the page and I navigate somewhere else then navigate to the carousel page.

Here is javascript:

  $ ('# home-carousel'). Hide (); $ ('# First-image') Load (function () {$ ('# loading-div'). Fade (function () {$ ('# home-carousel'). FadeIn ();});});  

Again to check whether the image is already full or not? And if so, do not display GIF?

Is it possible that the image is set for the carousel and image before "download" and "hide ()"?

What is the best way to handle this kind of scenario?

Thank you for your time.


Comments

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

html - CSS autoheight, but fit content to height of div -

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -