Question

我正在进行一次替换div的AJAX调用：

Appointment
Doctor Preparation
Doctor Review
3rd Party Contact
24-Hour Service

我的问题是图像宽度为100％，自动高度。这意味着我必须等到图像加载后再运行同位素来修复砌体网格的布局。

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

当我用replaceWith（）替换它时，在加载图像后它不会触发$('#product_list').isotope({ itemSelector: '.product'} );，所以我无法弄清楚如何做到这一点。

我知道这不是最佳解决方案，因为它会导致用户可见的跳转。对我来说最好的解决方法是将图像高度设置为固定高度，但我使用的是响应式自举网格，所以无论如何我都看不到这样做，因为我需要图像适合其容器的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后等待图像加载

1 个答案: