Preload image only after the full page has loaded

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...

try JQUERY LAZY LOAD - http://www.appelsiini.net/projects/lazyload — , Jun 18 '13 at 12:47
I think this topic discusses the same issue: http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load — Setup, Jun 18 '13 at 12:48

dsgriffin · Accepted Answer · 2013-06-18T13:49:25.210

1

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.
});

edited Jun 18 '13 at 13:49

answered Jun 18 '13 at 12:46

dsgriffin

66,495
17
137
137

score 0 · Answer 2 · answered Jun 18 '13 at 12:49

0

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

answered Jun 18 '13 at 12:49

thecotne

478
3
10

score 0 · Answer 3 · answered Jun 18 '13 at 12:50

0

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

</body>
</html>

answered Jun 18 '13 at 12:50

ZenMaster

12,363
5
36
59

Preload image only after the full page has loaded

3 Answers3