更改來源后如何判斷圖像何時完成渲染

Question

我正在開發一個Phonegap應用程序，在該應用程序中我試圖向用戶顯示不同數量的圖像。 我的GUI遵循中發現的原則這個文章。

我知道在發出ajax GET請求之前將獲得多少圖像，因此我使用jQuery的append方法將顯示加載gif的正確數量的圖像添加到相關的div中。 然后，我開始我的Ajax請求。

在我的成功回調中，我有以下方法

imageblock.forEach(function(entry)
{   
    changeImage(i, entry, i*1000);
    i++;                            
});

changeImage（）函數如下：

function changeImage(index, src, timeout)
{
    setTimeout(function()
    {
        $("#image"+index).attr("src", 'data:image/png;base64,'+src);
    },timeout);
}//changeImage

在不使用setTimeout（）的情況下，我觀​​察到該應用在呈現圖像時掛起。 這樣就可以了，因為它顯然給了瀏覽器足夠的時間來渲染圖像。

我想知道是否有比等待固定時間間隔加載下一張圖像更好的方法。 我調查了onLoad（），但是當我最初創建顯​​示加載gif的圖像標簽時，似乎觸發了。 有什么方法可以告訴圖像何時完成渲染？

Answer 1

您可以在Javascript中使用“ Image”類。 您可以通過創建Image類的新實例並添加“ onload”事件（在正確加載圖像時調度此事件）來執行此操作。

樣例代碼：

function changeImage(index, src, timeout)
{
    setTimeout(function()
    {
        $("#image"+index).attr("src", 'data:image/png;base64,'+src);

        var img = new Image();

        img.src = 'data:image/png;base64,'+src;
        img.onload = function() {
            alert("Image loaded!");
        };
    }, timeout);
}//changeImage

Answer 2

我最近對此主題進行了研究，發現了一些解決方案，無論是在SO還是博客文章中。 我最終嘗試了Paul Irish的解決方案 ，這似乎是最終的解決方案。 不幸的是，我從來沒有讓它在所有瀏覽器上都能正常工作，所以我只是把這個想法放在一邊，並將定期檢查是否存在在所有情況下都可以正常工作的東西...

Answer 3

您可以使用imagesloaded（ https://github.com/desandro/imagesloaded ）

使用imagesLoaded，您可以設置事件處理程序以知道何時加載圖像。

var imgLoad = imagesLoaded("images_selector");
function onAlways( instance ) {
  console.log('all images are loaded');
}
imgLoad.on( 'always', onAlways );

Answer 4

這是我最終要做的事情：

我沒有為每個期望的圖像創建占位符加載圖像，而是創建了一個加載圖像，然后執行ajax GET。 在我的成功回調中，我將每個圖像保存到一個數組中（在我的例子中，“圖像”是base64編碼的）。 將它們全部放入數組后，我將手動調用方法loadNextImage（i），該方法將創建一個具有onLoad屬性onLoad =“ loadNextImage（i ++）”的新圖像。 這似乎具有順序加載每個圖像的預期效果，並且不會減慢速度。

對於任何對此感興趣的人都是我的新成功回調：

imageblock.forEach(function(entry)
{   
    images[i] = entry;
    i++;
    currentimagesdisplayed = i;
});
loadNextImage(0);

這是loadNextImage（）函數：

function loadNextImage(i)
{
    var id = 'image'+i;
    var src = 'data:image/png;base64,'+images[i];
    i++;
    var onload = 'loadNextImage(' + i + ')';
    if(!(i>images.length))
    {
        $('#TownClerkPortalResultsImages').prepend('<img height="50%" width="100%" id ="' + id + '" src ="' + src + '" onLoad="' + onload + '"  />');
    }//if
    else
    {
        $("#recordsloader").hide();
    }//else

我會弄亂一些css，看看是否無法使其看起來花哨並讓它們淡入淡出。 如果仍然不能令人滿意，我將調查其他答案。