CODEWITHSUNDEEP
javascriptjqueryhtmlimage
krv
krv

Reputation: 2920

img.onload to hide modal after all images have loaded

I am using JSON to get paths of images and then dynamically creating the URL which I want to load.

The index.html

<div id="divData"></div>

The data.json

{
"images":[
    {"path":"slide1.jpg"},
    {"path":"slide2.jpg"}

    ]
}

The main.js

$(function(){

var siteUrl='data.json'; //get the json file via ajax
   $.getJSON(siteUrl, function(json, textStatus) {

    var rootObj=json.images
    for(var i=0;i<rootObj.length;i++){

        var fullpath="http://placehold.it/350x150"
        addnewimage(fullpath);
    }
    });

});

function addnewimage(path){
    var img=new Image();
            img.onload = function(){
                $("#divData").append(img);
                alert("done load");**// this alert show after every image** load
             };
        img.src=path;
}
});

I get the alert after every image load but I want it once when all the images have loaded. How can I do that?

NOTE: I am looking for a event driven way. I know that it can be done by a counter keeping track of loaded images,etc. But that's not what I am looking for.

Upvotes: 0

Views: 257

Answers (3)

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

Write .success() method like this:

$(function(){

var siteUrl='data.json'; //get the json file via ajax
   $.getJSON(siteUrl, function(json, textStatus) {

    var rootObj=json.images
    for(var i=0;i<rootObj.length;i++){

        var fullpath="http://placehold.it/350x150"
        addnewimage(fullpath);
    }
    }).success(function() {
      alert("done"); //do like this 
    });

});
  function addnewimage(path){
      var img=new Image();
              img.onload = function(){
                  $("#divData").append(img);
               };
       img.src=path;
  }
});

Upvotes: 1

Vijay
Vijay

Reputation: 3023

You can use $(window).load(function() { ... }); to ensure all the images and other contents are loaded fully.

If you want specific solution for only images here it is:

$(function() {  

      // To keep track of how many images have loaded
    var loaded = 0;

      // Let's retrieve how many images there are
    var numImages = 10;

      // Let's bind a function to the loading of EACH image
    $("img").load(function() {

          // One more image has loaded
        ++loaded;

          // Only if ALL the images have loaded
        if (loaded === numImages) {

              // This will be executed ONCE after all images are loaded.
            function() { ... }   
        }
    });
});

Upvotes: 0

Tushar
Tushar

Reputation: 87203

Try this:

var noOfImages = 0;
$(function () {
    var siteUrl = 'data.json'; //get the json file via ajax
    $.getJSON(siteUrl, function (json, textStatus) {

        var rootObj = json.images;
        noOfImages = rootObj.length; // No of images to be loaded

        for (var i = 0; i < rootObj.length; i++) {
            var fullpath = "http://placehold.it/350x150";
            addnewimage(fullpath);
        }
    });

});

function addnewimage(path) {
    var img = new Image();
    img.onload = function () {
        $("#divData").append(img);
        noOfImages -= 1;

        if (noOfImages === 0) {
            alert("All images are loaded"); 
        }
    };
    img.src = path;
}

Upvotes: 1

Related Questions