jQuery, JavaScript, HTML: how to load images after everything else is loaded?

Question

I have a very complex page with a lot of scripts and a rather long loading time. On top of that page I want to implement the jquery Nivo Slider (http://nivo.dev7studios.com/).

In the documentation it says I have to list all images for the slider inside of a div#slider

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

However I might have 10 images with a 1000x400px which is quite big. Those images would load when the page loads. Since they are in my header this might take quite a while.

I looking for a way to use any jquery Slider Plugin (like the nivo slider) but either dynamically load images or load all those images after everything else on my page has loaded.

Any idea how I could solve that?

Is there even a way to start a javascript process after everything else on the page has loaded? If there is a way I might have an solution for my problem (using the jquery ajax load() method) ... However I have no idea how to wait for everything else to load and then start the slider with all the images.

Answer 1

Here's what we did and its working great. We skipped setting src attribute of img and added img-location to a fake attribute lsrc. Then we load a dynamic image with lsrc value, and set the src of actual image only after its loaded.

Its not about faster loading, but its about showing the images only when its downloaded completely on your page, so that user do not have to see that annoying half-loaded images. A placeholder-image can be used while the actual images are being loaded.

Here's the code.

 $(function(){
    $.each(document.images, function(){
               var this_image = this;
               var src = $(this_image).attr('src') || '' ;
               if(!src.length > 0){
                   //this_image.src = options.loading; // show loading
                   var lsrc = $(this_image).attr('lsrc') || '' ;
                   if(lsrc.length > 0){
                       var img = new Image();
                       img.src = lsrc;
                       $(img).load(function() {
                           this_image.src = this.src;
                       });
                   }
               }
           });
  });

Edit: Trick is to set the src attribute only when that source is loaded in temporary img. $(img).load(fn); handles that.

Answer 2

In addition to Xhalent's answer, use the .append() function in jQuery to add them to the DOM:

Your HTML would just have:

<div id="slider">
</div>

And then your jquery would be:

jQuery(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});

Answer 3

check out jquery load() event, it waits for everything including graphics

$(window).load(function () {
  // run code
});

on load you could then load the images using:

var image = new Image();
image.src = "/path/to/huge/file.jpg";

You can add a function onload to the image too

image.onload = function() {
  ...
}

Answer 4

I am using the below to power my slider and improve the page load performance.

   for (var i = document.images.length - 1; i >= 0; i--) {
      var this_image = document.images[i];
      var src = $(this_image).attr('src') || '' ;
      if(!src.length > 0){
        var lsrc = $(this_image).attr('lsrc') || '' ;
        if(lsrc.length > 0){
          $(this_image).attr("src",lsrc);
        }
      }
    }

Answer 5

the best way to use is b -lazy js. bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page. For a full list of options, functions and examples go to the blog post: http://dinbror.dk/blog/blazy.

The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image. When an image has loaded it removes the loader in the callback.

In Html

 <img class="b-lazy"
     src="placeholder-image.jpg"
     data-src="image.jpg"
     data-src-small="small-image.jpg"
     alt="Image description" />

In js

var bLazy = new Blazy({
        breakpoints: [{
        width: 420 // Max-width
          , src: 'data-src-small'
    }]
      , success: function(element){
        setTimeout(function(){
        // We want to remove the loader gif now.
        // First we find the parent container
        // then we remove the "loading" class which holds the loader image
        var parent = element.parentNode;
        parent.className = parent.className.replace(/\bloading\b/,'');
        }, 200);
        }
   });

Example

Answer 6

jquery has a syntax for executing javascript after document has loaded:

<script type="text/javascript">
jQuery(function(){

//your function implementation here...

});
</script>