您的位置:鄭州SEO網站優化 > WordPress > 內容詳情

wordpress教材:WordPress圖片延遲加載的實現【代碼篇】

发布时间:2016-04-17 00:00 來源:互聯網 編輯:本站編輯 浏覽次數:62人

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

WordPress圖片延遲加載的介紹

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

圖片預加載的核心:lazyload。

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

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

新版 jquery.lazyload.js 插件,要求必须给图片地址添加一个data-original属性,例如下:

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

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

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

<script?src="<?php?echo?get_template_directory_uri();??>/js/jquery.min.js"?type="text/javascript"></script><script?src="<?php?echo?get_template_directory_uri();??>/js/jquery.lazyload.min.js"?type="text/javascript"></script><script?type="text/javascript">????$(function()?{????????$("img").lazyload({????????????effect:"fadeIn"??????????});????????});</script>

加载了js这些后,网站里图片就能够实现延迟加载了,但是文章里的图片貌似还没有实现WordPress图片延迟加载,下面就是给wordpress里文章里插入的图片加data-original属性了,将下面代码贴进wordpress主題文件夹的functions.php内

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

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

其实也有插件版的,请进:images lazyload

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

最新文章

  • 1使用自媒體平台做SEO優化成未來趨勢
  • 2直播都那麽火爲什麽還一直堅持做
  • 3百度將近一個月的瘋狂更新,今天終
  • 4洛陽優化公司教你關于搜索引擎優化
  • 5SEO從業者學習免費自助建站的三個思
  • 6洛陽seo教你怎樣才能做好SEO管理者?
  • 7图片外链有什么用 可以提高网站的排
  • 8驚爆!有關SEO文章收錄的問題,詳情
  • 9數據庫遷移造成網站兩三天內打不開
  • 10新鄉SEO感想篇:SEO基礎五要素回顧
  • 11教你通過逆向思維實施SEO達成目的
  • 12新鄉網站優化網站一直不收錄怎麽辦
  • 13新鄉SEO告訴你網站如何進行圖片搜索
  • 14新鄉SEO告訴你新站怎樣快速獲得百度
  • 15開封裝修公司案例-開封漢東裝飾設計
  • 16開封SEO案例-開封婚紗攝影工作室
  • 17開封SEO案例-蔬菜大棚,大棚骨架
  • 18開封SEO優化案例-開封大衆婚慶公司
  • 19開封優化案例-開封大衆搬家公司
  • 20開封SEO案例-開封美的空調維修