检查AJAX检索到的图像是否都已首先加载

Question

使用AJAX在html中加载时，在执行"某些操作"（如显示图像）之前，如何检查该html中的所有图像是否已完全加载。

我已经尝试了多种方法，包括"图像加载"插件。

var page = 'P40',
    path = 'http://www.domain.com/gallery/embed-items/'+page;
$.get(path, function(data) {
    $(data).imagesLoaded( function() {
    $('#gallery-masonry').append($.parseHTML(data));
        $galleryContainer.masonry("reloadItems");
        $galleryContainer.masonry();
    });
});

设置为"数据"的html大约为20，如下所示：

<div class="grid col-12 bp1-col-6 bp2-col-4 bp3-col-3 item gallery-item half-divide">
    <img srcset="http://www.domain.com/images/uploads/gallery/Venice_Lagoon_Sunrise_2_Jan_2016-1550.jpg, http://www.domain.com/images/uploads/gallery/Venice_Lagoon_Sunrise_2_Jan_2016-1550.jpg 2x" title="Venice Lagoon Sunrise" alt="Venice Lagoon Sunrise">
</div>

新

$.get(path, function(data) {
    var doc = document.implementation.createHTMLDocument(""); // you could also use DOMParser, but parsing HTML is supported only in modern browsers.
    doc.body.innerHTML = data; // write the data to document
    var images = doc.querySelectorAll("img"), // get all images, you can specify only some though by particular selector
        amount = images.length; // inital length
    [].forEach.call(images, function(img) { // loop over images
        img.onload = function() { // bind the listener
            amount--; // ok one item was loaded, we decrease the amount
            if (amount === 0) { // if amount is equal to 0, it means the images are loaded
                $('#gallery-masonry').append(body);
                $galleryContainer.masonry("reloadItems");
                $galleryContainer.masonry();
            }
        };
    });
    var body = $('body')[0].appendParent(doc.querySelector("body")); // attach the content of body (the data you received).
});

Answer 1

加载图像时会触发一个事件，称为"加载"。您可以使用它并将其附加到您收到的所有图像上。您应该在将图像添加到DOM之前绑定该事件侦听器（这意味着在它们的下载尚未运行之前）。

示例：

var page = 'P40',
path = '/';
$.get(path, function(data) {
  var doc = document.implementation.createHTMLDocument(""); // you could also use DOMParser, but parsing HTML is supported only in modern browsers.
  doc.body.innerHTML = data; // write the data to document
  var images = doc.querySelectorAll("img"), // get all images, you can specify only some though by particular selector
      amount = images.length; // inital length
  [].forEach.call(images, function(img) { // loop over images
    img.onload = function() { // bind the listener
      amount--; // ok one item was loaded, we decrease the amount
      if (amount === 0) { // if amount is equal to 0, it means the images are loaded
        // images loaded
      }
    };
  });
 // loop over the content of body (it wraps your content) and add each child of it
  [].forEach.call(doc.body.children, function(child) {
    document.body.appendChild(child); 
  });
});

代码的返工

$.get(path, function(data) {
    var container = $('#gallery-masonry')[0]; // container for images
    var doc = document.implementation.createHTMLDocument(""); // you could also use DOMParser, but parsing HTML is supported only in modern browsers.
    doc.body.innerHTML = data; // write the data to document
    var images = doc.querySelectorAll("img"), // get all images, you can specify only some though by particular selector
        amount = images.length; // inital length
    [].forEach.call(images, function(img) { // loop over images
        img.onload = function() { // bind the listener
            amount--; // ok one item was loaded, we decrease the amount
            if (amount === 0) { // if amount is equal to 0, it means the images are loaded    
                container.style.display = "";
                $galleryContainer.masonry("reloadItems");
                $galleryContainer.masonry();
            }
        };
    });
    container.style.display = "none";
    [].forEach.call(doc.body.children, function(child) {
       container.appendChild(child); 
    });
});