使用延迟加载解析图像

Question

我需要一些帮助来修复延迟加载解析图像。 我只是将代码抓取到我的网站，而不是图片本身。

我将 data-srcset 放在源属性字段中，但它不会改变任何东西。

我也尝试使用 data-src、data-original 和 src。

 <figure class="item-img"><div style="margin:0 auto;max-width:1000px;"><div class="responsive-img img-article-item" style="padding-bottom: 50%"> <picture><!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(min-width: 1024px)" sizes="740px" data-srcset="https://***.com/wordpress/wp-content/uploads/2020/12/ff7-ch14-41.jpg?q=50&amp;fit=crop&amp;w=740&amp;h=370&amp;dpr=1.5 740w"> <source media="(min-width: 768px)" sizes="963px" data-srcset="https://***.com/wordpress/wp-content/uploads/2020/12/ff7-ch14-41.jpg?q=50&amp;fit=crop&amp;w=963&amp;h=481&amp;dpr=1.5 963w"> <source media="(min-width: 481px)" sizes="737px" data-srcset="https://****/wordpress/wp-content/uploads/2020/12/ff7-ch14-41.jpg?q=50&amp;fit=crop&amp;w=737&amp;h=368&amp;dpr=1.5 737w"> <source media="(min-width: 0px)" sizes="450px" data-srcset="https://***.com/wordpress/wp-content/uploads/2020/12/ff7-ch14-41.jpg?q=50&amp;fit=crop&amp;w=450&amp;h=225&amp;dpr=1.5 450w"> <!--[if IE 9]></video><![endif]--><img class="lazyload" alt="В*****"></picture></div></div> </figure><div class="ad-even">

Answer 1

大多数 web 工作的延迟加载解决方案的方式涉及 javascript，它侦听一个事件，通过在 src 或 srcset 属性中输入一个值来告诉它“激活”源标记。 data-src 和 data-srcset 是这些 JS 系统存储它们延迟加载的资源的 url 的方式，而无需提示标签以实际加载它们。 当需要显示图像时，JS 将 data-src 标签内容移动到 src 属性中，然后加载图像。 我假设您从中复制的代码配置了这样的功能。

因此，如果您只有没有 JS 函数监视它们的标签，准备在时机成熟时打开它们，那么它们将永远不会加载您正在寻找的资源。 您的浏览器不知道 data-src 或 data-srcset 是什么意思，也不会读取这些值。 您必须配置一个延迟加载函数或自己编写一个函数才能使其工作。