js圖片預載入程式碼片段分享

antzone發表於2017-04-06

本章節分享一段程式碼片段,它是實現圖片預載入的核心程式碼部分。

當然實現的方式有許多種,這裡是其中的一種方式,不過原理都是大同小異,需要的朋友可以做一下參考。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
function preloadImages(oImageList, callback) {
  if ( typeof (oImageList) == 'object' && typeof (callback) === "function") {
    var iCallbackAfter = oImageList.length;
    var iPreloadInterval = window.setInterval(function() {
      if (iCallbackAfter === 0) {
        window.clearInterval(iPreloadInterval);
        callback();
      }
    }, 100);
    $.each(oImageList, function(iIndex, sImage) {
      oImageList[iIndex] = new Image();
      oImageList[iIndex].onload = function(oResult) {
        iCallbackAfter--;
      };
      oImageList[iIndex].onabort = function(oResult) {
        console.log(oResult);
      };
      oImageList[iIndex].onerror = function(oResult) {
        console.log(oResult);
      };
      oImageList[iIndex].src = sImage;
    });
  }
}


相關文章