检查 AJAX 检索到的图像是否全部首先加载

Question

当使用 AJAX 在 html 中加载时，如何检查 HTML 中的所有图像是否在执行 "something"（如显示它们）之前已完全加载。

我尝试了多种方式，包括 'imagesloaded' 插件。

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();

    });

});

设置成'data'的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

加载图像时会触发一个事件 - 它称为 "load"。您可以使用它并将其附加到您收到的所有图像。您应该在将图像添加到 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); 
    });

});

检查 AJAX 检索到的图像是否全部首先加载

Check that AJAX retrieved images are all loaded first

html

ajax

jquery

imagesloaded