how to reduce load time of image in javascript

Question

I am loading image on button click next and previous here i have only 2 div which are animating on click of next and previous button with different images coming from database through json .

I am getting my functionality done but it looking fine only on localhost when I am uploading this on server it gets a blank screen between the animation due to image loading actually what happens my div has completed animation and showing next div but image are loaded properly so a blank div is shown

I want to reduce this load time or my screen will show when the image has been loaded completely how can I fix it ?

basically i want a ajax loader which will automatically get remove after loading Here is my code

<table cellpadding="0" cellspacing="0" border="0" width="815" align="center">
    <tr>
        <td><div class="btnPrv2" id="btnPrv2">&lt;</div></td>             
        <td>
            <div class="slider">
                <div class="mc3" id="mc3" ><img src="" class="ff3" /></div>
                <div class="mc4" id="mc4" ><img src="" class="ff4" /></div>
            </div>
        </td>             
        <td><div class="btnNxt2" id="btnNxt2">&gt;</div></td>             
    </tr>
</table>

<script>
    $(function(){ 
      $(".mc3").animate({left:"-=782px" },350);
      $(".mc4").animate({left:"-=782px" },350, function(){ curwdiv = hdiv; canAnim = true});
    });
</script>

Answer 1

One way to do it could be load the images when loading the page but keep it hide it using zindex or something like that, then you just need to put it on front and the load time should be longer for loading the page but lesser on the button action.

Could be something like this in your html:

<div class="mc3" id="mc3" style="zindex:-1;" ><img src="" class="ff3" /></div>

And then something like this in your js to show the image (maybe in your function):

$(".mc3").zIndex(inherit);

PD: I think you should look into your ortography and sintax, it is nearly impossible to understand you question.

Answer 2

I've got this plug somewhere,

For example you have

<img class="preload_image" src="#">
<img class="preload_image" src="#">
<img class="preload_image" src="#">

It will count the images, and will check if all of them are already loaded, check the code below.

// .preload_image is the image class that needed to be loaded
$('.preload_image').imagemonitor({
    'onLoad': function (loadedImage, totalImage) {
        // While loading, progress bar will be shown
        $('#load-progressbar img').css('width', Math.floor((loadedImage / totalImage) * 100) + '%');
    },
    'onComplete': function (loadedImage) {

        // After loading, show image
        $('#load-display').fadeOut(2000).queue(function () {
            $('#content-display').fadeIn(2000);
            $(this).dequeue();
        });
    }
});

Then here's the source code for that.

(function( $ ){
  $.fn.imagemonitor = function(imageEvent) 
  {
    var totalImage = 0;
    var loadedImage = 0;
    var loadedImageSrc = Array();
    var imageObject = Array();
    var isComplete = false;
    var loop_delay = 200; // in miliseconds
    var imgElement = this;
    if(imageEvent.init == null) imageEvent.init = function(){};
    if(imageEvent.onLoad == null) imageEvent.onLoad = function(){};
    if(imageEvent.onComplete == null) imageEvent.onComplete = function(){};
    function createImageObject()
    {
        imgElement.each(function(index)
        {
            imageObject[index] = new Image();
            $(imageObject[index]).attr('src', $(this).attr('src'));
        });
    }
    function count_loaded_image()
    {
        for(var i=0; imageObject[i]; i++)
        {
            if(!checkIfLoaded($(imageObject[i]).attr('src')))
            {
                if(imageObject[i].complete || imageObject[i].readyState === 4) 
                {
                    loadedImageSrc.push($(imageObject[i]).attr('src'));
                    loadedImage++;
                    imageEvent.onLoad(loadedImage, totalImage);
                }
            }
        }
        if((loadedImage == totalImage) && !isComplete) 
        {
            isComplete = true;
            imageEvent.onComplete(loadedImage);
        }
        else setTimeout(count_loaded_image, loop_delay);

    }
    function getTotalImage()
    {
        var tempImageSrc = Array();
        imgElement.each(function(index)
        {
            var counted = false;
            for(i=0; tempImageSrc[i]; i++)
            {
                if(tempImageSrc[i] == $(this).attr('src')) counted = true;
            }
            if(!counted) tempImageSrc.push($(this).attr('src'))
        });
        return tempImageSrc.length;
    }
    function checkIfLoaded(src)
    {
        var loaded = false;
        for(var i=0; loadedImageSrc[i]; i++)
        {
            if(loadedImageSrc[i] == src) loaded = true;
        }
        return loaded;
    }
    function setOnloadEvent()
    {
        imgElement.each(function(index)
        {
            $(this).load(function()
            {
                if(!checkIfLoaded($(this).attr('src')))
                {
                    loadedImage++;
                    loadedImageSrc.push($(this).attr('src'));
                    imageEvent.onLoad(loadedImage, totalImage);
                    if((loadedImage == totalImage) && !isComplete) 
                    {
                        isComplete = true;
                        imageEvent.onComplete(loadedImage);
                    }
                }
            }); 
        });
    }
    imageEvent.init();
    totalImage = getTotalImage();
    createImageObject();
    setOnloadEvent();
    count_loaded_image();
  };
})( jQuery );