Tôi có thể đồng bộ hóa nhiều cuộc gọi tải hình ảnh không?

Question

Tôi muốn có một chức năng chạy khi hình ảnh cụ thể được tải, nhưng tôi không biết phải đợi cho cả hai tải trước khi chạy. Tôi chỉ biết cách kết nối chúng, như bên dưới:

Image1 = new Image(); 
Image1.src = 'image1-link.jpg'; 

Image2 = new Image(); 
Image2.src = 'image2-link.jpg'; 

Image1.onload = function() { 
    Image2.onload = function() { ... } 
} 

Nhược điểm là phải đợi cho đến khi Image1 tải hoàn toàn trước khi lấy giây. Tôi muốn thử một cái gì đó như thế này:

Image1 = new Image(); 
Image1.src = 'image1-link.jpg'; 

Image2 = new Image(); 
Image2.src = 'image2-link.jpg'; 

(Image1 && Image2).onload = function() { ... } 

EDIT: Cảm ơn bạn đã giúp Paul Grime và ziesemer. Cả hai câu trả lời của bạn đều rất tốt. Tôi nghĩ tôi phải đưa ra câu trả lời tốt nhất cho Paul Grime, mặc dù anh ta sử dụng nhiều mã hơn, tôi chỉ cần biết src của hình ảnh và hàm onload được xây dựng trong khi trong câu trả lời của ziesemer tôi cần biết cả src, số đếm của các hình ảnh, và phải viết nhiều dòng onload.

Tùy thuộc vào tình huống, cả hai đều có mục đích của chúng. Cảm ơn hai bạn vì sự giúp đỡ.

Answer 1

fiddle Điều này có thể giúp đỡ. Đó là một 'bộ tải' chung chung đơn giản.

http://jsfiddle.net/8baGb/1/

Và mã:

// loader will 'load' items by calling thingToDo for each item, 
// before calling allDone when all the things to do have been done. 
function loader(items, thingToDo, allDone) { 
    if (!items) { 
     // nothing to do. 
     return; 
    } 

    if ("undefined" === items.length) { 
     // convert single item to array. 
     items = [items]; 
    } 

    var count = items.length; 

    // this callback counts down the things to do. 
    var thingToDoCompleted = function (items, i) { 
     count--; 
     if (0 == count) { 
      allDone(items); 
     } 
    }; 

    for (var i = 0; i < items.length; i++) { 
     // 'do' each thing, and await callback. 
     thingToDo(items, i, thingToDoCompleted); 
    } 
} 

function loadImage(items, i, onComplete) { 
    var onLoad = function (e) { 
     e.target.removeEventListener("load", onLoad); 

     // this next line can be removed. 
     // only here to prove the image was loaded. 
     document.body.appendChild(e.target); 

     // notify that we're done. 
     onComplete(items, i); 
    } 
    var img = new Image(); 
    img.addEventListener("load", onLoad, false); 
    img.src = items[i]; 
} 

var items = ['http://bits.wikimedia.org/images/wikimedia-button.png', 
      'http://bits.wikimedia.org/skins-1.18/common/images/poweredby_mediawiki_88x31.png', 
      'http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png', 
      'http://upload.wikimedia.org/wikipedia/commons/3/38/Icons_example.png']; 

loader(items, loadImage, function() { 
    alert("done"); 
}); 

Answer 2

Nếu bạn không thể sử dụng một cái gì đó như jQuery, hãy tạo một hàm trợ giúp bạn có thể chuyển đến onload của tất cả hình ảnh bạn quan tâm. Mỗi lần được gọi, tăng bộ đếm hoặc thêm tên src một bộ. Khi bộ đếm hoặc bộ của bạn đạt đến kích thước của tất cả các hình ảnh mà bạn đang mong đợi, thì bạn có thể kích hoạt bất kỳ công việc nào bạn thực sự muốn làm.

Cái gì như:

var imageCollector = function(expectedCount, completeFn){ 
    var receivedCount; 
    return function(){ 
    if(++receivedCount == expectedcount){ 
     completeFn(); 
    } 
    }; 
}(); 

var ic = imageCollector(2, function(){alert("Done!");}); 
Image1.onload = ic; 
Image2.onload = ic; 

Answer 3

tôi lấy ví dụ Paul bụi bẩn của trên và sửa đổi nó để dễ hiểu hơn trong khi vẫn hoàn thành các nhu OP. Tôi cảm thấy những câu trả lời khác ở đây là phức tạp hoặc không đủ. Hy vọng rằng mã này dễ dàng hơn một chút để nhận và đưa vào. Tôi đã sử dụng dấu gạch dưới cho mỗi vòng lặp, nhưng điều này rất dễ thay đổi.

Ngoài ra, tôi đã cải tiến giải pháp ngay bây giờ để có một cuộc gọi lại cho lỗi img. Nếu hình ảnh được tải, nó sẽ được thêm vào mảng, nếu nó không thành công thì không. Tôi cũng thay đổi nó để sử dụng jquery.

var loadedImages = [], 
    imagePaths = [{"src": "myimg.png"}, {"src": "myotherimg.png"}]; 

loadImages(imagePaths, loadedImages, function(loadedImages) { 
    console.log(loadedImages) 
}); 

function loadImages(imagePaths, loadedImages, callback) { 
    if (!imagePaths) { return; } 

    var count = imagePaths.length; 

    _.each(imagePaths, function(data, key, list) { 
     var onLoad = function (e) { 
      count--; 
      if (0 == count) { 
       callback(loadedImages); 
      } 
     } 

     $(document.createElement("img")) 
      .on('load', function() { 
       loadedImages.push(data); 
       onLoad(); 
      }) 
      .on('error', function() { onLoad(); }) 
      .attr("src", data["src"]); 
    }); 
},