當前位置：主頁 > 網站建設 > WordPress圖片延遲加載的實現【代碼篇】,建站文章

WordPress圖片延遲加載的實現【代碼篇】,建站文章

時間:2023-07-23 12:07:23 閱讀: 文章分類: 網站建設作者: 網站編輯員

導讀:建站文章建站文章最近有朋友在群里面提問，我們的wordpress 圖片延遲加載功能是如何實現的，既然大家覺得預加載的功能非常好，那么小編就專門寫一篇文章來介紹wordpress網站搭建教程網站服務器搭建。

網站搭建教程網站服務器搭建

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

WordPress圖片延遲加載的介紹

預加載，顧名思義，在超出網站可視范圍內，圖片不做加載，等到用戶滾動瀏覽器窗口，圖片元素到達可視范圍內，開始加載圖片，這樣的方式可以打打的節省網站的資源dede織夢模板和加快網站加載的速度，所以對于圖片較多的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中加載文件：

????$(function()?{

????????$("img").lazyload({

????????????effect:"fadeIn"

??????????});

????????});

</script>

加載dede免費校板下戰了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);

關鍵詞標簽: 建站加載代碼

聲明: 本文由我的SEOUC技術文章主頁發布于:2023-07-23 ，文章WordPress圖片延遲加載的實現【代碼篇】,建站文章主要講述加載,代碼,建站網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_35379.html