1

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

我尝试了多种方法，包括“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();

    });

});

设置为“数据”的 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).

});
4

1 回答 1

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

});
于 2016-05-08T17:46:11.913 回答