使用Javascript - 等待圖像加載

Question

var l = false; 
var l2 = false; 

var imm = new Image(); 
imm.src = "b.png"; 

imm.onload = function(){ 
l = true; 
} 

var imm2 = new Image(); 
imm2.src = "c.png"; 

imm2.onload = function(){ 
l2 = true; 
} 

我怎樣才能知道這個JavaScript啓動功能只有在l和l2是真的嗎？我應該設置一個不斷檢查這兩個變量的循環嗎？有沒有更有效的方法？我不想讓我的腳本在沒有圖像的情況下啓動，但使用.onload我只能等待一個圖像被加載，而不是全部。謝謝你的幫助！

Answer 1

無需循環。你可以讓他們打電話來檢查，如果L和L2爲真時，執行您想要做的事：

var onLoaded = function() { 
    if (l && l2) { 
     // do your stuff 
    } 
} 

imm.onload = function(){ 
    l = true; 
    onLoaded(); // call to onLoaded 
} 

imm2.onload = function(){ 
    l2 = true; 
    onLoaded(); // call to onLoaded 
} 

它基本上是Observer Pattern的更簡單的形式。有jQuery插件，如Radio.js，爲您封裝。

Answer 2

如果在整個腳本中只有2次設置了l和l2，則可以在設置值後進行檢查。

var l = false; 
var l2 = false; 

var imm = new Image(); 
imm.src = "b.png"; 

imm.onload = function(){ 
    l = true; 
    if (l && l2) { 
    myFunc(); 
    } 
} 

var imm2 = new Image(); 
imm2.src = "c.png"; 

imm2.onload = function(){ 
    l2 = true; 
    if (l && l2) { 
    myFunc(); 
    } 
} 

function myFunc(){ 
    //do stuff 
} 

Answer 3

你不必經常檢查，每次完成檢查時都會檢查另一個，這樣，當第二次檢查完成後，你的功能將會啓動，你只需要檢查一次。 var l = false; var l2 = false;在我看來

var imm = new Image(); 
imm.src = "b.png"; 

imm.onload = function(){ 
l = true; 

if (l2) 
    call yourFunction(); 

} 

var imm2 = new Image(); 
imm2.src = "c.png"; 

imm2.onload = function(){ 
l2 = true; 

if (l) 
    call yourFunction(); 
} 

Answer 4

更優雅的方式：

var loadedImagesCount = 0; 
var imageNames = ["b.png", "c.png"]; 
var imagesArray = []; 
for (var i = 0; i < imageNames.length; i++) { 
    var image = new Image(); 
    image.src = imageNames[i]; 
    image.onload = function(){ 
     loadedImagesCount++; 
     if (loadedImagesCount >= imageNames.length) { 
      //loaded all pictures 
     } 
    } 
    imagesArray.push(image); 
} 

相反，有很多不同的圖像變量的插科打諢，只是在普通數組圖像名稱存儲，然後在這個循環，算多少照片將被加載的。

Answer 5

這裏是一個通用的一個（作品與任意數量的圖像）

function preload(images, callback){ 
    var imageElements = [], 
     counter = images.length, 
     lfunc = function(){if (--counter === 0 && callback) callback(imageElements);}; 

    // first create the images and apply the onload method 
    for (var i = 0, len = images.length; i < len; i++){ 
     var img = new Image(); 
     imageElements.push(img); 
     img.onload = lfunc; 
     img.src = images[i]; 
    } 
} 

function codeOncePreloadCompletes(preloadedImages){ 
    // Do whatever you want here 
    // images are preloaded 
    // you have access to the preloaded image if you need them 
    // with the preloadedImages argument 
} 

// USAGE 

preload(['b.png', 'c.png'], codeOncePreloadCompletes); 

// OR 

preload(['b.png', 'c.png'], function(preloadImages){ 
    // write directly here what to do after preload 
}); 

Answer 6

如果要加載圖像的順序，從一個網址給定的名單，然後我覺得這是有用的：

preloadImages_helper("firstURL", "secondURL"); 

    function preloadImages_helper(){ 
     var args = Array.prototype.slice.call(arguments); 
     if(!(args === undefined) && args.length > 0){ 
      var img = new Image(); 
      img.src = arguments[0]; 
      img.onload = function(){ 
       preloadedImages.push(img); 
       console.log("pushing image"); 
       //Don't forget to call user code! 
       if(!(args === undefined) && args.length > 1){ 
        args.shift(); 
        preloadImages_helper.apply(this, args); 
       } 
       else{ 
        console.log("finished loading images"); 
        userCode(); 
       } 
      }; 
     } 
    }