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

Question

我在按钮上单击下一个和上一个加载图像在这里我只有2 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>

Answer 1

一种方法是在加载页面时加载图像，但使用zindex或类似方法将其隐藏，那么您只需要将其放在最前面，加载时间就应该更长，而在页面上要少按钮动作。

在您的html中可能是这样的：

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

然后在您的js中这样显示图像（也许在您的函数中）：

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

PD：我认为您应该调查您的地形和正弦波，几乎不可能理解您的问题。

Answer 2

我在某个地方有这个插头，

例如你有

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

它将对图像进行计数，并检查所有图像是否已加载，请检查以下代码。

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