Php 延迟加载包含内容的图像

我正在做这个[页面][1]

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

我以这种方式包括中间和右边的列内容：

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

我认为插件不能与

include

内容一起工作的问题是，内容是在插件加载之后加载的

知道真正的问题是什么吗？如何修复它？

此wordpress插件-使用

数据src

属性进行延迟加载。因此,

改变

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

“/>

到

“/>

---

参考-

延迟加载是一种JavaScript（浏览器副作用）效果。If与PHP中的“include”无关

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

问题很可能在于您有另一个脚本，它似乎绝对定位了“product”类，这可以从代码中的“datos”对象推断出来。datos脚本本身可能会强制加载，否则它将不知道大小以便定位它们-检查此脚本中发生了什么

而且，也不能保证哪个剧本会赢；当您的延迟加载脚本在所有产品中运行时，会发现它们是“顶部0”，即“在折叠上方”，因此会立即加载图像。然后，datos脚本可能会将这些产品放置在折叠下面，但为时已晚，它们正在加载（如果尚未加载的话）。无法确定确切的机制，但这是最有可能的情况

解决方案：

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

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

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

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

---

[1] 注意：为了避免评论，这简化了事情，因为可以在加载整个页面之前启动JS；buy you在正文底部有include，因此参数是静音的。

您可以尝试添加稍后的重新加载脚本，以重新加载任何未能加载的脚本 有时服务器拒绝处理传入的请求。 以下是帮助我解决问题的变通方法

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

函数重载（idx，无尝试） {

console.log（“重新加载已触发”+idx）；
var最大重试次数=100；
var glob=真；
$。每个（$（“img”）函数（索引、值）{
如果（this.naturalWidth==0）
{
$（this.attr（“src”），$（this.attr（“src”）；
log（$（this.attr（'src'））；
glob=假；
}
} );
如果（！glob&&no\u of\u try<最大重试次数）
setTimeout（函数（）{reload_img（idx+1，no_of_try+1）；}，1500）；

}

setTimeout（函数（）{reload_img（1,1）；}，1500）；//在此处启动重新加载\u img（）

代码只是检查元素是否已加载和呈现。

---

如果没有，请重试加载映像，最多重试100次。

我将

src

更改为

data src

，映像停止保存。我添加了

datasrc

作为另一个属性，但仍然没有任何效果。问题是左列的图像没有数据src

attr

，但是插件可以使用它们。你知道问题出在哪里吗？如果你浏览插件源代码，你会发现它依赖于

data src

属性。它钩住窗口的

滚动

和

调整大小

事件。一旦图像进入视点（+-threshold），就会删除

data src

属性，因此在页面源代码中很难看到它。我缺少的一件事是，我通过wordpress插件中的js源代码，不是php代码。这是另一个解决方案，即使用

$。getScript

它支持在脚本下载后回调，以便您可以强制在页面上运行脚本的顺序。如果用户打开站点进入选项卡，然后一天内都不返回，那么会发生可怕的情况没有延迟加载会对页面起到更大的作用点我不想向下滚动，并等待高达1.5秒之前，它开始下载图像显示给我。。。

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

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

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);