如何減少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 );