導(dǎo)讀:網(wǎng)站搭建網(wǎng)站搭建wordpress給圖片延遲加載的好處當(dāng)然是增加用戶體驗(yàn)及網(wǎng)站加載速度了，圖片延遲加載更是給裝逼犯一種很動(dòng)態(tài)的樣子效果，下面直接爆教程。 圖片延遲加載的原理就是建站技術(shù)建站技術(shù)論壇。

wordpress給圖片延遲加載的好處當(dāng)然是增加用戶體驗(yàn)及網(wǎng)站加載速度了，圖片延遲加載更是給裝逼犯一種很動(dòng)態(tài)的樣子效果，下面直接爆教程。

圖片延遲加載的原理就是給圖片地址添加一個(gè)data-original屬性，如下：

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

結(jié)構(gòu)里必須有data-original屬性，才可以實(shí)現(xiàn)延遲加載的效果！

首先給主題的hedede網(wǎng)站模板ader.php調(diào)用相關(guān)文件吧

<script?type="text/javascript"?src="./jquery1.8.3.js"></script>

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

<script?type="text/javascript">

$(document).ready(function(){

$("img").lazyload({

effect?:?"fadeIn"

});

});

</script>

接下來要將正文圖片真實(shí)地址放在data-origina中，src地址放上我們設(shè)置的默認(rèn)顯示的圖片。一一修改代碼既費(fèi)時(shí)又費(fèi)力，可以修改functions.php文件，自動(dòng)替換成我們想要的內(nèi)容

//圖片延遲加載

function?lazyload($content)?{

$loadimg_url=get_bloginfo('template_directory').'/img/img_loading.gif';

if(!is_feed()||!is_robots)?{

$content=preg_replace('/織夢模板網(wǎng)站&lt;img(.+)src=[\'"]([^\'"]+)[\'"](.*)&gt;/i',"&lt;img\$1data-original=\"\$2\"?src=\"$loadimg_url\"\$3&gt;織夢模板修改\n&lt;noscript&gt;\$0&lt;/noscript&gt;",$content);

}

return?$content;

}

add_filter?('the_content',?'lazyload');

免費(fèi)下載相關(guān)建站技術(shù)建站技術(shù)論壇。

關(guān)鍵詞標(biāo)簽: WordPress 加載 插件