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://m.survivalescaperooms.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. }