使用带有Wordpress循环的LazyLoad.js

Question

我正在尝试使用LazyLoad.js在滚动时淡化我的图像。 （http://www.appelsiini.net/projects/lazyload）

对于我手动编码的图像，它似乎运行良好，因为我可以手动将“src”更改为“data-original”。

我遇到的问题是将它与循环“”函数集成。

我遇到过这个，但我不确定如何实现它：

add_filter( 'img.lazy', function( $src ) {
    return "' data-original='$src";
});

我想动态地将所有“”标签更改为“”标签，同时还为每个标签添加“懒惰”类。

这可以吗？

Answer 1

使用WordPress lazy load plugin而不是手动将JavaScript延迟加载插件集成到WordPress安装中，如果使用此方法，则无需编写单行代码，它真的非常好，（我已经使用了多年）。

  

延迟加载

     

延迟加载图片以改善页面加载时间。仅使用jQuery.sonar   在视口中显示图像时加载图像。这个插件是一个   WordPress.com VIP团队编写的代码合并   Automattic，TechCrunch 2011重新设计团队和Jake Goldman（10up   LLC）。使用Dave Artz（AOL）的jQuery.sonar。

只需从管理面板安装它并激活插件即可完成。另外，请检查this collection以进行图像优化。

安装：

您可以从管理面板轻松安装，转到Plugins->Add New并将lazy load放入keyword输入框，然后按Search Plugins，它会显示给您一些插件的列表，只需点击相应插件的Install Now链接即可安装，然后点击您所在页面上的activate plugin链接即可。

屏幕截图：