Question

我正在处理此[页码] [1]

问题是主页有很多要展示的项目，因此加载速度非常慢。我找到的解决方案是在图像上使用延迟加载（我使用此plugin）。它适用于左列（不包含内容。您可以在向下滚动时看到图像加载）但它不能处理中心和右列的项目这是我包含的内容。

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

<?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（浏览器端）效果。如果与＆＃34;包括＆＃34;无关。用PHP。

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

问题出在哪里最有可能是因为你有另一个脚本似乎正在定位＆＃34;产品＆＃34;绝对的课程 - 可以从＆＃34;数据＆＃34;你在代码中拥有的对象。数据脚本本身可能会强制加载，否则它不知道大小以便定位它们 - 检查此脚本中的内容。

此外，还不能保证哪个剧本会赢;当你的延迟加载脚本遍历所有产品时，发现它们是＆＃34; top 0＆＃34;这是＆＃34;高于折叠＆＃34;所以直接加载图像。然后数据脚本可能随后将这些产品定位在折叠之下，但为时已晚，它们正在加载（如果尚未加载）。无法确定确切的机制，但这是最有可能出现的情况。

解决方案：

首先，检查数据脚本是否强制加载以定位项目。如果是的话，你真的需要它们绝对定位吗？为什么不让它们流动，那么你可以删除src如下？如果你确实需要绝对的位置，我认为它很难＆＃34;。

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

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

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

[1]注意：为了避免注释，这简化了事情，因为在整个页面加载之前可以启动JS;买你的身体底部包括所以参数是静音。

Answer 3

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

在模板或视图页面中添加以下javascript代码段

function 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次重试的图像。

延迟加载包含内容的图像

3 个答案: