Preload image only after the full page has loaded

StackOverflow https://stackoverflow.com/questions/17169203

Question

I want to preload 5-6 images so that I can display them when the user scrolls down (facebook-like-auto-load-on-scroll). So when the user scrolls down, the images are displayed without further loading. I used the following CSS code earlier:

img.not-load
{
 display:none;
}

So, when using jQuery, I made them visible, they appeared without loading. But the problem is that, the page-loading time increased. I want to use jQuery to load the images ONLY AFTER the full page was loaded. I tried using jQuery's $(document).ready(function(){ ... }); but it worked almost in the same manner, that is loading the required images WHILE the page is loading. I hope you understand my problem. I am a beginner in jQuery and need some clue to proceed further. Your assistance is appreciated in advance...

Was it helpful?

Solution

You would use the $(window).on('load') event instead of the $(document).ready() like you attempted.

This would wait for all elements on the page to load before triggering.

$(window).on('load', function() { 
   // Perform tasks after everything has loaded.
});

OTHER TIPS

what you need is lazyload remake your img tags like this 

 <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

and add javascript

  $("img.lazy").lazyload();

http://www.appelsiini.net/projects/lazyload

<html>
<head>
    <title></title>
    ...
    <script>
        $(function() {
            ... pre-load your images here ...
        });
    </script>
</head>
<body>

</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top