使用带有Wordpress循环的LazyLoad.js

时间:2013-11-18 20:06:56

标签: jquery filter

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

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

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

我遇到过这个,但我不确定如何实现它:

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

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

这可以吗?

1 个答案:

答案 0 :(得分:0)

使用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链接即可。

屏幕截图: enter image description here