Lazyload插件可以讓我們網(wǎng)站省不少流量了,Lazyload的功能就是讓不可視區(qū)域圖片不加載,等等我們加載之后就可以自動(dòng)加載圖片了,下面我們來(lái)看看Lazyload在wordpress中使用方法.

博客之前用的這個(gè)方法來(lái)延遲加載圖片的,感覺(jué)上圖片是延遲加載了,但這并不是真正的延遲,打開(kāi)含有圖片的頁(yè)面時(shí),還會(huì)加載所有的圖片,另外jquery.lazyload.js最新代碼已經(jīng)改過(guò)了,再用以前的方法也失效了.

現(xiàn)在,大神們解決了此問(wèn)題,原來(lái) jQuery lazyload 插件說(shuō)要把圖片的地址寫(xiě)入 data-original 屬性,loading 圖片地址寫(xiě)入 URL 屬性才能實(shí)現(xiàn)真正圖片稍后載入(lazyload),也就是說(shuō)要修改圖片的html結(jié)構(gòu).

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

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

上述代碼中,img/example.jpg 是真正要顯示的圖片地址.

jQuery lazyload的使用

完整jQuery lazyload 圖片延遲加載方法設(shè)置如下.

第一步:加載jQuery相關(guān)文件。

你要加載jQuery和這個(gè)插件,你可以使用以下代碼,加載這幾個(gè)文件:

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

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

第二步:定義圖片結(jié)構(gòu)。

按照官方的建議,定義你的img結(jié)構(gòu):

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

第三步:觸發(fā)這個(gè)插件,生效,激活以下,你就可以在目標(biāo)中使用了.

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

使用jQuery lazyload的優(yōu)點(diǎn)

優(yōu)點(diǎn)已經(jīng)說(shuō)的太多了,這里就不贅述了.

使用jQuery lazyload的缺點(diǎn),缺點(diǎn)也有,這里也不贅述了,這里要提一個(gè)最大的缺點(diǎn)就是,此方法不方便操作,因?yàn)槊看味及催@個(gè)html結(jié)構(gòu)來(lái)插入圖片,那工作量陡增許多，而且有可能導(dǎo)致圖片根本不顯示,因此,young為wordpress寫(xiě)了一串如下代碼,用正則表達(dá)式重組一下img標(biāo)簽，放在主題的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. } 

上述代碼中l(wèi)oading1.gif建議使用絕對(duì)路徑,比如 http://www.companysz.com /images/loading.gif

但是這個(gè)代碼loading.gif地址不能通用,每個(gè)人還需要再修改成自己的地址,為此我專(zhuān)門(mén)請(qǐng)教了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. }