Question

我有这个功能来创建新图像以将它们加载到内存中

function preloadImgs() {
var imgDomain = "http://imgs.domain/";
if (document.images) {
    var img1 = new Image();
    var img2 = new Image();
    var img3 = new Image();

    img1.src = imgDomain + "images/1/cover.jpg";
    img2.src = imgDomain + "images/2/cover.jpg";
    img3.src = imgDomain + "images/3/cover.jpg";
} } 

// initialize the function 
preloadImgs()

我需要一种方法来了解何时加载了preloadImgs()函数中的所有图像，如何使用我提供的相同代码实现该目标？

Answer 1

您可以使用承诺模式。

https://developers.google.com/web/fundamentals/getting-started/primers/promises

虽然这些都不是本地支持的，但jQuery（标记）提供了一个实现：

https://api.jquery.com/promise/

结合img.onload来解决承诺，你可以通过以下方式回复承诺数组：

var arrayOfPromises = [];
var $deferred = $.Deferred();
var img = new Image();
img.onload = function() {
    // Check your support needs @ http://caniuse.com/#search=naturalWidth
    if (img.naturalWidth && img.naturalHeight) {
       $deferred.resolve()
    } else {
       $deferred.reject();
    }
 };
 img.onerror = $deferred.reject;
 img.src = 'someimage.png';

 arrayOfPromises.push($deferred);

 $.when.apply($, arrayOfPromises).then(function() {
   // your callback, images all loaded
   alert('OK')
 }, function() {
   // Any failed image load occur
   alert('FAIL')
 });

我想知道图像何时加载到内存中

1 个答案: