WordPress博客使用Lazyload 图片延迟加载功能

Lazyload插件可以让我们网站省不少流量了,Lazyload的功能就是让不可视区域图片不加载,等等我们加载之后就可以自动加载图片了,下面我们来看看Lazyload在wordpress中使用方法.

博客之前用的这个方法来延迟加载图片的,感觉上图片是延迟加载了,但这并不是真正的延迟,打开含有图片的页面时,还会加载所有的图片,另外jquery.lazyload.js最新代码已经改过了,再用以前的方法也失效了.

现在,大神们解决了此问题,原来 jQuery lazyload 插件说要把图片的地址写入 data-original 属性,loading 图片地址写入 URL 属性才能实现真正图片稍后载入(lazyload),也就是说要修改图片的html结构.

修改前:<img src=“img/example.jpg”>

修改后:<img data-original=“img/example.jpg” src=“img/grey.gif”>

上述代码中,img/example.jpg 是真正要显示的图片地址.

jQuery lazyload的使用

完整jQuery lazyload 图片延迟加载方法设置如下.

第一步:加载jQuery相关文件。

你要加载jQuery和这个插件,你可以使用以下代码,加载这几个文件:

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

第二步:定义图片结构。

按照官方的建议,定义你的img结构:

<img src="img/grey.gif" data-original="img/example.jpg">

第三步:触发这个插件,生效,激活以下,你就可以在目标中使用了.

$(“img.lazy”).lazyload();

使用jQuery lazyload的优点

优点已经说的太多了,这里就不赘述了.

使用jQuery lazyload的缺点,缺点也有,这里也不赘述了,这里要提一个最大的缺点就是,此方法不方便操作,因为每次都按这个html结构来插入图片,那工作量陡增许多，而且有可能导致图片根本不显示,因此,young为wordpress写了一串如下代码,用正则表达式重组一下img标签，放在主题的functions.php文件中直接使用就可以了,这样还是可以按照以前的方式插入图片,代码:

1. add_filter ('the_content', 'lazyload'); 
2. function lazyload($content) { 
3.  if(!is_feed()||!is_robots) { 
4.   $content=preg_replace('/<img(.+)src=[/'"]([^/'"]+)[/'"](.*)>/i',"<img/$1data-original=/"/$2/" src=/"loading1.gif/"/$3>/n<noscript>/$0</noscript>",$content); 
5.  } 
6.  return $content; 
7. } 

上述代码中loading1.gif建议使用绝对路径,比如 http://www.Cuoxin.com /images/loading.gif

但是这个代码loading.gif地址不能通用,每个人还需要再修改成自己的地址,为此我专门请教了young,重新修改了一下代码,只需要将loading.gif放置到主题文件夹就可以了.

1. add_filter ('the_content', 'lazyload'); 
2. function lazyload($content) { 
3. $loadimg_url=get_bloginfo('template_directory').'/loading.gif'; 
4. if(!is_feed()||!is_robots) { 
5. $content=preg_replace('/<img(.+)src=[/'"]([^/'"]+)[/'"](.*)>/i',"<img/$1data-original=/"/$2/" src=/"$loadimg_url/"/$3>/n<noscript>/$0</noscript>",$content); 
6. } 
7. return $content; 
8. }