如何减少javascript中图像的加载时间

我在按钮上加载图像，单击“下一步”和“上一步” 在这里，我只有两个div，它们在单击“下一步”和“上一步”按钮时会显示动画，不同的图像通过

json

来自数据库

我正在完成我的功能，但只有在本地主机上它看起来很好。当我在服务器上上载时，由于图像加载，在动画之间会出现一个空白屏幕。实际上发生了什么？我的div已完成动画并显示下一个div，但图像已正确加载，因此会显示一个空白div

我想缩短此加载时间，否则当图像完全加载后，我的屏幕将显示如何修复它

基本上我想要一个ajax加载程序，它将在加载后自动删除 这是我的代码

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

$（函数（）{
$（“.mc3”）.animate（{左：“-=782px”}，350）；
$（“.mc4”）.animate（{left:”-=782px“}，350，function（）{curwdiv=hdiv；canAnim=true}）；
});

一种方法是在加载页面时加载图像，但使用zindex或类似工具将其隐藏，然后您只需将其放在前面，加载页面的加载时间应该更长，但按钮操作的加载时间更短

在html中可能是这样的：

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

---

PD：我想你应该仔细研究一下你的ortography和sintax，要理解你的问题几乎是不可能的。

我有这个插头

比如你有

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

下面是它的源代码

(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 );

---

放一个较小的图像大小。如果您感兴趣，请查看此链接并搜索优化图像而不丢失图像质量。由于某些原因，我可以更改图像大小和动画时间，那么jquery中是否有任何函数告诉我图像加载已经完成

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

(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 );