在學(xué)做網(wǎng)站論壇之前的建站教程中，介紹過什么是圖片延遲加載，又叫圖片懶加載。對(duì)于網(wǎng)站頁面上有大量圖片，圖片延遲加載非常有用，可以加速網(wǎng)頁打開速度，減輕服務(wù)器負(fù)擔(dān)。

對(duì)于圖片延遲加載功能，很多使用WordPress程序建網(wǎng)站的學(xué)員不會(huì)使用。下面就來介紹一下WordPress如何實(shí)現(xiàn)圖片延遲加載。

方法/步驟

1. 圖片延遲加載是基于JQUERY的，所以需要在自己網(wǎng)站上加載JQUERY。在底部模板footer.php中</body>標(biāo)簽上面加上以下的JS代碼，引入JQUERY。
   <scrip src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2. 下載圖片延遲加載必需的jquery.lazyload.js 插件，下載地址：jquery.lazyload.min，下載好后，將它傳到自己模板中的images文件夾里。
3. 使用以下的JS代碼調(diào)用jquery.lazyload.js 插件，放在</body>標(biāo)簽上面。
   <script src="<?php echo get_template_directory_uri(); ?>/images/jquery.lazyload.min.js"></script>
   <script type="text/javascript">
   $(function() {
   $("img").lazyload({
   effect:"fadeIn"
   });
   });
   </script>
4. 所在模板里的圖片都需要添加一個(gè)data-original屬性。代碼示例：
   <img data-original="img/abc.jpg" width="540" height="300" alt="">
5. 除了模板文件中有圖片之外，我們?cè)诎l(fā)布文章時(shí)，也會(huì)插件圖片。為了讓文章圖片也能延遲加載，需要在模板函數(shù)文件functions.php中加入以下函數(shù)代碼：
   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;
   }
6. 通過以上幾步的修改，整個(gè)wordpress網(wǎng)站里的圖片都可以實(shí)現(xiàn)延遲加載了，在學(xué)員學(xué)習(xí)怎么做網(wǎng)站可以自己動(dòng)手操作一下，實(shí)現(xiàn)自己網(wǎng)站的延遲加載。

標(biāo)簽： 代碼 服務(wù)器 建網(wǎng)站 建站 建站教程

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。