替换后等待图像加载 div

Question

我正在调用 AJAX 来替换 div:

$.post(url, function(data) 
{
    $('#product_list').first().replaceWith(data.products);
});

我的问题是图像的宽度为 100%，高度为自动。这意味着我必须等到图像加载后才能运行同位素修复砖石网格的布局。

$('#product_list').isotope({ itemSelector: '.product'} );

当我用 replaceWith() 替换时，它不会在加载图像后触发 $(window).load()，所以我不知道该怎么做。

我知道这不是最佳解决方案，因为它会导致用户看到跳转。对我来说最好的解决方法是将图像高度设置为固定高度，但我使用的是响应式 bootstrap 网格，所以无论如何我都看不到这样做，因为我需要图像适应其容器的 100% 宽度以保持设计.

我想不出解决这个问题的办法。不知道每张图片的高度确定后如何触发事件

Answer 1

您可以创建一个 JS img 对象并使用该图像的 onload 事件来触发您自己的 javascript 代码，该代码会执行一些簿记工作，当所有图像都已触发时您会触发您的加载事件。

var $imgs = $('img'), total = $imgs.length, sum = 0;
$imgs.each(function(){
    var img = new Image();
    img.src = $(this).attr('src');
    img.onload = function() {
        sum++;
        if (sum === total) {
          // all images have loaded, so you can fire your event.
        }
    }
});

替换后等待图像加载 div

Waiting for images to load after replacing div

javascript

jquery

ajax

jquery-isotope