延迟加载不适用于 Ajax 请求答案

【问题标题】：Lazy Loading doesn't work for Ajax Request延迟加载不适用于 Ajax 请求
【发布时间】：2018-01-19 16:38:23
【问题描述】：

我在此处（提示 1）https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/ 实施了 David Walsh 的提示中的延迟加载，并且在新加载网站时效果很好。但是当图像被过滤并使用 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) }) %>

任何指导将不胜感激！

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax lazy-loading

【解决方案1】：

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

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

【讨论】：

谢谢！我试过 $('#typemask a').on('click', function(){ $('.pages_index img').setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); }; }); => 控制台日志说 img 无法识别并且 $(document).ajaxComplete(function(evt){ [].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute ('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); }; }); }); => 什么都没发生