Friday, December 28, 2012

loading message until all the images are load


Start loading when function call.

$.mobile.showPageLoadingMsg();
$.each(data.cmspages, function(key, value) {
                       content+='<li class="ui-li ui-li-static ui-btn-up-c">'+
                       '<div class="ui-grid-a">'+
                       '<div class="ui-block-a left_thumbs">';
                       for(var i=0;i<value.images.length;i++){  // multiple images in single page.
                       content+='<img src="'+imagepath+'ayana/files/gallery_image/'+value.images[i]+'" class="image_'+id+key+'">';
                       }
});
$('#cms_content').html(content);
//call isimage load function to check all image is load or not.
isimage_load(id,data.cmspages.length);


function isimage_load(id,img_length){
    var counter=0;
    for(i=0;i<img_length;i++)
    {
        $('.image_'+id+i).load(function() {
            counter = counter+1;
            if(counter == img_length){
                     $.mobile.hidePageLoadingMsg();
            }
        });
    }    
}

in isimage_load function when counter is equal to the img_length
then hide loading message.
 I hope it will help you to improve your app.

cheers.