在包含内容上延迟加载图像

Question

我正在处理这个 [page][1]

问题是主页有很多项目要显示，所以加载速度很慢。我找到的解决方案是对图像使用延迟加载（我正在使用这个plugin）。它适用于左列（不包括内容。您可以在向下滚动时看到加载的图像），但它不适用于中心和右列的项目 strong> 这是我包含的内容。

我以这种方式包含中心和右列内容：

<?php include("parts/backbone_tmpl_productos_main.php"); ?>

这是backbone_tmpl_productos_main.php文件的内容：

    <script id="tmpl_Post" type="template">
        <div class="image"><img src="<%= post_item.image_url.url %>" /></div>
        <div class="obra_meta">
            <span class="nombre_artista"><%
             _.each(taxonomy_product_cat, function(item){
                if(item.parent === 146){%><%= item.title %><% } 
                if(item.parent === 216){%><%= item.title %><% } 
             })
             %></span>
            <span class="nombre_obra"><%= title %></span>
        </div>
        <div class="descripcion_obra"></div>

        <div class="buy_opts">
            <?php if (ICL_LANGUAGE_CODE == 'en') {
                echo '<div class="precio pull-left">From: 24.99 €</div>';
            }else{
                echo '<% if(price != "") {%><div class="precio pull-left"><%= price %></div><% } %>';
            }
            ?>
            <div class="pull-right"><button class="btn btn-default boton_comprar comprar"><?=__('COMPRAR');?></button></div>
        </div>
    </script>

我认为该插件不适用于include 内容的问题是因为该内容是在插件加载后加载的。

知道真正的问题是什么吗？我该如何解决？

Answer 1

这个 wordpress 插件 - https://wordpress.org/plugins/unveil-lazy-load/ 使用 data-src 属性进行延迟加载。因此，

改变

<div class="image"><img src="<%= post_item.image_url.url %>" /></div>

到

<div class="image"><img data-src="<%= post_item.image_url.url %>" /></div>

参考 - https://github.com/luis-almeida/unveil/blob/master/jquery.unveil.js

Answer 2

延迟加载是一种 JavaScript（浏览器端）效果。 if 与 PHP 中的 "include" 无关。

基本上 PHP 生成页面，包括所有包含，并传递给浏览器。浏览器然后执行 JS 并启动延迟加载。 [1]与 PHP 生成页面的确切方法无关。

问题出在哪里很可能是因为您有另一个脚本似乎绝对定位“产品”类 - 可以从代码中的“datos”对象推测。 datos 脚本本身可能会强制加载，否则它不会知道大小以定位它们 - 请检查此脚本中发生的情况。

此外，无法保证哪个脚本会胜出；当您的延迟加载脚本运行所有产品时，发现它们是“首屏”的“前 0”，因此会立即加载图像。然后 datos 脚本可能会去并将这些产品放置在折叠下方，但是为时已晚，它们正在加载（如果尚未加载）。无法确定确切的机制，但这是最有可能的情况。

解决方案：

首先，检查 datos 脚本是否强制加载以定位项目。如果是，你真的需要它们绝对定位吗？为什么不让它们流动，然后您可以删除 src 如下？如果你确实需要绝对位置，我认为这很“艰难”。

其次：假设 datos 脚本不强制加载，复制一些编码白痴建议的内容，并将“src”移动到“data-src”，但是您需要将延迟加载脚本修改为从那里拉出图像。该代码引用了“settings.data_attribute”，但文档中没有任何内容。快速阅读表明将“dettings.data_atribute”设置为“src”可能有效，或者询问开发人员如何使用这些设置。 （您可能同时还需要设置占位符）。但是通过移出“src”并进入数据属性，您会阻止浏览器最初加载并让脚本完成它的工作，因为...

最后：在延迟加载脚本中添加超时，以便在放置产品的其他脚本之后触发。

其他注意事项：插件很棒，但如果您有这么多，您最好自己编写其中的一些。他们似乎发生了冲突。此外，可以通过存储/缓存 $(element) jQuery 对象而不是重复重新创建它来改进延迟加载插件。您还可以通过在 HTML 结束标记后添加脚本来生成格式错误的 HTML。一些小的改进可能会鼓励您更深入地了解正在发生的事情。

[1] 注意：为了避免 cmets，这是为了简化事情，因为可以在整个页面加载之前让 JS 启动；购买你在正文底部有包含，所以参数是静音的。

Answer 3

您可以尝试添加 later-reload-script 以重新加载任何无法加载的内容 图像，有时服务器拒绝处理传入的请求。 这是帮助我解决问题的解决方法。

在您的模板或查看页面中添加下面的 javascript sn-p

函数 reload_img(idx, no_of_try) {

console.log("Reload fired " + idx);
var MAX_RETRIES = 100;
var glob = true;

$.each($("img"), function(index, value){

    if ( this.naturalWidth == 0)
    {
        $(this).attr("src", $(this).attr("src"));
        console.log( $(this).attr('src'));
        glob = false;
    }
} );

if ( !glob && no_of_try < MAX_RETRIES )
    setTimeout(function(){ reload_img(idx + 1, no_of_try + 1); }, 1500); 

}

setTimeout(function(){ reload_img(1,1); }, 1500); // 在这里启动 reload_img()

代码只是检查一个元素是否被加载和渲染。 如果不是，则重试加载图像，最多重试 100 次。