Question

我正在点击下一个和上一个按钮点击图片这里我只有2个div，点击下一个和上一个按钮动画，不同的图像来自数据库json。

我正在完成我的功能，但是当我在服务器上传它时它只在localhost上看起来很好它在动画之间得到一个空白屏幕由于图像加载实际上我的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：我认为你应该研究你的ortography和sintax，几乎不可能理解你的问题。

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

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

2 个答案: