wordpress給圖片延遲加載lazyload

wordpress 2023-12-30編輯：重慶網(wǎng)站建設(shè) WordPress 延遲 加載

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

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

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

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

首先給主題的header.php調(diào)用相關(guān)文件吧

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

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

1. //圖片延遲加載
2. function?lazyload($content)?{
3. $loadimg_url=get_bloginfo('template_directory').'/img/img_loading.gif';
4. if(!is_feed()||!is_robots)?{
5. $content=preg_replace('/&lt;img(.+)src=['"]([^'"]+)['"](.*)&gt;/i',"&lt;img$1data-original="$2"?src="$loadimg_url"$3&gt;n&lt;noscript&gt;$0&lt;/noscript&gt;",$content);
6. }
7. return?$content;
8. }
9. add_filter?('the_content',?'lazyload');

相關(guān)文件下載地址 城通網(wǎng)盤下載 下載資源版權(quán)歸作者所有；本站所有資源均來源于網(wǎng)絡(luò)，僅供學(xué)習(xí)使用，請(qǐng)支持正版！

• 上一章：WordPress博客網(wǎng)站添加評(píng)論輸入禮花及震...
• 下一章：WordPress“JustNews主題”免費(fèi)下載