如何判斷一個圖像在更改其源後的渲染時間

我正在研究一個Phonegap應用程序，其中我試圖向用戶顯示不同數量的圖像。我的GUI遵循this文章中的原則。如何判斷一個圖像在更改其源後的渲染時間

我知道在我製作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的圖像標記時觸發。有什麼方法可以告訴圖像何時完成渲染？

來源

2014-01-28 DrS

按照這個：http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded你應該使用這個：https：//github.com/desandro/imagesloaded – datashaman

您可以在Javascript中使用'圖像'類。您可以通過創建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

來源

2014-01-28 16:12:09

我最近研究了這個問題，並發現了一些解決方案，是它on SO或博客文章。我結束了嘗試the solution from Paul Irish，這似乎是最終的工作解決方案。 Unfortuntely，我從來沒有得到它在所有瀏覽器正常工作，所以我剛剛離開這個想法放在一邊，如果有什麼存在的，在所有情況下工作會定期檢查......

來源

2014-01-28 16:16:13

您可以使用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);

來源

2014-01-28 16:17:13 Usse

這裏是我落得這樣做：

而是創建我期待每一個圖像佔位符加載圖像，我創建一個單一的加載圖像，然後執行我的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浪費時間，看看我能」讓它看起來很花哨，讓它們淡入或什麼東西。如果這仍不能令人滿意，我會考慮其他答案。

來源

2014-01-28 16:57:42 DrS

如何判斷一個圖像在更改其源後的渲染時間

回答

相關問題