也想出現在這里?聯系我們

WordPress圖片延遲加載的實現【代碼篇】

  • 文章介紹
  • 升級版本
  • 評價&建議

最近有朋友在群里面提問,我們的WordPress圖片延遲加載功能是如何實現的,既然大家覺得預加載的功能非常好,那么小編就專門寫一篇文章來介紹wordpress的預加載是如何實現的吧!

WordPress圖片延遲加載的介紹

預加載,顧名思義,在超出網站可視范圍內,圖片不做加載,等到用戶滾動瀏覽器窗口,圖片元素到達可視范圍內,開始加載圖片,這樣的方式可以打打的節省網站的資源和加快網站加載的速度,所以對于圖片較多的wordpress網站來說,圖片預加載功能還是非常的好的。

圖片預加載的核心:lazyload。

對于lazyload有網站編程經驗的朋友應該都很熟悉,圖片預加載的功能實現就是這個js文件來實現的。

使用lazyload有兩種方式,一種是使用插件,一種是直接集成在主題中的非插件方式,下面我們首先介紹一下非插件實現lazyload:

新版 jquery.lazyload.js 插件,要求必須給圖片地址添加一個data-original屬性,例如下:

  1. <img?class="lazy"?data-original="img/example.jpg"?width="640"?height="480">

所以,我們要給wordpress主題里,有圖片展示的地方加上data-original屬性才行。

然后往header.php中加載文件:

  1. <script?src="<?php?echo?get_template_directory_uri();??>/js/jquery.min.js"?type="text/javascript"></script>
  2. <script?src="<?php?echo?get_template_directory_uri();??>/js/jquery.lazyload.min.js"?type="text/javascript"></script>
  3. <script?type="text/javascript">
  4. ????$(function()?{
  5. ????????$("img").lazyload({
  6. ????????????effect:"fadeIn"
  7. ??????????});
  8. ????????});
  9. </script>

加載了js這些后,網站里圖片就能夠實現延遲加載了,但是文章里的圖片貌似還沒有實現WordPress圖片延遲加載,下面就是給wordpress里文章里插入的圖片加data-original屬性了,將下面代碼貼進wordpress主題文件夾的functions.php內

  1. add_filter?('the_content',?'lazyload');
  2. function?lazyload($content)?{
  3. ????$loadimg_url=get_bloginfo('template_directory').'/images/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. }

經過這兩步驟,網站就實現了WordPress圖片延遲加載了!

其實也有插件版的,請進:images lazyload

上面所說的都已打包文件可進行下載,請到下載區下載全部相關文件吧!

有用2
  • 2015.02.01初次和大家見面了!

等待您對該主題的建議

發表評論

還能輸入240個字

Hi, 歡迎加入Wordpress技術交流群,帶你裝逼帶你飛!

我要入群
也想出現在這里?聯系我們
wordpress加速

我來推薦一個更牛逼的給你看看?

  • 猛戳我吧
夫妇野外交换HD高清版,免费A片在线观看,亚洲精品国产自在现线,中国老妇人60OLDMANTV