延迟加载不适用于Ajax请求

Question

我已经在David Walsh的提示（技巧1）https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/中实现了延迟加载，并且它在网站的新负载下运行良好。但是当使用ajax请求过滤和重新渲染图像时，它不起作用。我正在使用Rails，图像包含在一个部分中，在点击过滤器时在ajax请求上重新呈现。当通过ajax请求过滤图像时，仅加载模糊占位符图像而不加载实际图像。

我的js代码是

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
  img.removeAttribute('data-src');
  };
});

我的图片代码是

<%=image_tag(activity.lead_image.xs_thumb, :class => "card-img-top", :alt => "Card image cap", data: { "src" => image_path(activity.lead_image.thumb) }) %>

任何操纵者都会非常感激！

Answer 1

您的JavaScript在页面加载时运行一次，当您的ajax请求发生时，您有一组新的img标记尚未被评估。

您可能希望在调用ajax后再次调用延迟加载的Javascript 。您可以将JS封装在函数中，并在完成ajax调用后调用它。