问题标签 [jquery-lazyload]

我已经在我的网站上实现了延迟加载，但我发现侧边栏图像直到整页滚动才加载。因为侧边栏 HTML 代码是页脚，而 CSS 用于在侧边栏中显示它。

有没有办法我可以做一些事情来显示侧边栏图像而无需完全滚动，例如在一点滚动之后

测试页面： http: //www.pricingindia.in/mobile/nokia-lumia-1320-price-80950

如何使图像响应延迟加载和同位素 jquery 插件？到目前为止，我有以下代码：

Lazyload 像这样工作，同位素中的砌体也是如此，但是当我将浏览器的大小调整为比图像宽度更薄时，它会脱离页面内容容器并且不会响应收缩。让它变得困难的是lazyload似乎想要img标签的样式部分中图像的真实宽度和高度。

对我来说不幸的是，Meta Slider WP 插件不支持延迟加载，但它非常适合我的需要 - 差不多。原因如下：

我有大量图像（每个滑块）将使用这个 WP Meta Slider 插件显示在多个滑块中。所有滑块都将使用 Flex Slider 选项，而不是它们可用的其他选项。而且，您可以想象，页面加载时间很糟糕。

我查找了延迟加载并遇到了这个站点：

http://www.appelsiini.net/projects/lazyload

这似乎是我需要的完美解决方案，但是我需要在 Meta Slider 文件中的哪里输入代码片段才能让这个插件一次停止加载所有图像？发生的情况是，当访问者访问该站点时，该插件会在第一次页面加载时加载您上传到它的每张图片，这导致页面加载速度非常慢。

附加信息：

图像为 png、120x220 且小于 50kb。我发现将它们转换为 jpg 而不是 gif 可以将文件大小压缩到 12kb 和 15kb 之间，但是任何更低的图像都会开始失去色彩质量，并且图像色彩质量非常重要。

附加信息结束

无论如何，我的图像数据库正在增长，我需要仅在访问者向上或向下滚动时加载图像，以尽可能减少页面加载时间，这样访问者就不会被关闭并离开网站。

谢谢！

哦，这是插件，我正在使用：

wordpress.org/plugins/ml-slider/

我已经实现了一个功能，其中我使用 MVC 4 中的实体框架通过 ajax 调用从数据库中获取记录。有超过 2000 条记录来自数据库并且需要更多时间来显示然后我决定改变方法，现在我想实现 Lazy加载方法如下：

点击这里

我在控制器中创建了一个函数，我在其中传递 pagenumber 参数（并将 pagesize 设置为 10）并在 ajax 调用中返回结果。

但我不明白如何将 ajax 调用与延迟加载结合起来。实际上我在 ajax 调用中传递页码参数。所以我想要如下所示：

1) 向下滚动页码将增加 1

2) 使用递增的页码进行 ajax 调用

3）返回结果将显示在div中，依此类推，直到最后一个结果。

谢谢

我的页面上有一些图像：

如果无法加载图像（abc.jpg例如，因为不存在），那么我会显示一个“默认”图像：

如果我将LazyLoad添加到我的图像并加载更轻量级的默认图像，它将变为：

现在，当页面加载时，它将首先加载轻量级图像，然后再加载实际图像。

但是如果实际图像不存在怎么办？轻量级默认图像将保留在那里，但这不是我想要的：

default.jpg出错时如何加载我的默认图像 ( )？

PS：默认图片很重，所以我想避免将其加载为默认图片。

我有一个页面，其中延迟加载在滚动时加载了 1000 多个图像，如果我的浏览器“滞后”（考虑不平滑滚动但它可以解决），延迟加载在加载第一个图像后无法在大约 7 个图像上执行。（每行 8 张图像）。

如果我滚动得太快也会发生。（我认为原因与上述情况相同）

我正在试图找出解决方案。

这是原始功能，我尝试使用 .each() 循环对其进行修改，这导致以常规方式加载图像，只是速度较慢。

插件： http: //www.appelsiini.net/projects/lazyload 我正在使用响应式设计，也许这是原因？

看来这只是 webkit 问题（chrome，safari）在 mozilla 上效果很好，而且它似乎只是 OS X 问题。windows webkit 浏览器上的一切都很好

根据此链接，lazyload 现在与 holder.js 脚本兼容。

这是一个jsFiddle。我预计第三张图像会像其他图像一样淡出。但我无法让它工作。

有人能告诉我我做错了什么吗？

提前致谢。

HTML：

JS：

我正在使用lazyload unviel，但由于某种原因，它不会加载我绝对定位的图像。

https://github.com/luis-almeida/unveil

我该如何解决这个问题？他们是我应该使用的不同的 Lazyload 吗？

演示

我需要从以下代码中获取图像 src

HTML

我尝试编写js：

但它显示 src 密钥不存在。如何取消评论头像图像？

更新：

我查看页面源时找不到图像url，但是firebug显示图像url：

<img id='lazyload_1953171323_17' height='24' alt='4 helpful votes' width='25' class='icon lazy'/>

这是我页面的源代码：

使用lazyload有什么问题吗？

更新 2

使用延迟加载使我的图像在页面加载后加载，我尝试获取图像 ID 并将它们与延迟加载js数组进行比较，但此 ID 与延迟加载var数组不匹配。

问题：

如何从这个JSON中获取这个 js 数组？

例子：

我有一个 JSON 提要，当我正在解析它并使用延迟加载插件时，该提要对于照片 URL 的位置可能具有三种不同的可能性。

例如，如果没有照片，则它是未定义的（见下文，我已经单独测试了该行并且它有效）。如果有一张照片，它将位于 data.value.items[i]["media:content"].url。如果有不止一张照片，它将位于 data.value.items[i]["media:content"][i].url （其中 media:content 中的 i 为 0、1、2 等，取决于存在多少张照片）。

链接和标题都很好。我只是照片有问题。

在此代码的当前版本中，我可以通过控制台登录并查看所有内容似乎都分配了占位符照片（green_app.jpg）或链接到实际照片。但是我无法让它显示在页面上。