帝國cms+jquery.lazyload.js實現圖片延遲懶加載的極簡方法

2024-08-28 12:24:50

字體：大中小

來源：轉載

供稿：網友

如果你對網站速度優化有一定了解，或者你是用過百度統計提供的網站速度診斷工具的網站管理者，會知曉一件事：一個網站頁面圖片過多的話，加載時會導致網頁打開變慢，甚至看得見“卡頓”的現象。這不僅會影響用戶的瀏覽體驗，也會影響到搜索引擎對網站的優劣評判及seo。

網站速度診斷工具

（如上圖所示，相比于js等文本類文件，三個紅色標注的圖片文件，就算kb更小，加載時間亦要久很多）

對于較大型的、有專業程序員配置的網站運營者來說，為網站中的圖片實現惰性加載(專業術語，俗稱為延遲加載，懶加載)，是一件正常不過的事。畢竟，懶加載不是什么新技術，好幾年前就已經在較大的互聯網站普及了。

那問題來了：什么是懶加載？

答：懶加載是一種網頁交互呈現效果。通常而言，首次只加載第一屏（能看得見的）的圖片，之后的圖片則不加載（或只加載一個文件容量特別小的圖片，稱為占位圖），如果用戶拖動滾動條至后面某處位置（這處位置稱為可視區域）則再加載圖片，這樣做的好處是避免網頁因加載圖片過多而打開慢的弊端。

兩個字，提速！如果網站圖片多，要提速，那懶加載就是web技術層面的標配。

提升網站頁面加載速度，利于seo提升——懶加載好處看上去很多，只是要如何具體地用在自己的網站上呢？對于沒有專業程序員參與的網站運營管理者來說，要實現懶加載并不是那么容易。

網上有一些教程，厲害的高手是自己寫原生js來解決，更多快捷解決方案是使用jquery.lazyload.js插件，有示例代碼及演示（請自行搜索或參見此處鏈接），這個插件的使用并不難，如果是從零開始構建一個頁面，直接套用是沒有問題的，可是要套用在帝國cms制作好的網站里，得用什么方式方法呢？

jquery.lazyload.js

經過在學而行營銷網的實踐摸索，以下是帝國cms結合jquery.lazyload.js實現圖片延遲懶加載的極簡解決方法。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

首先，要下載jquery.lazyload.js的迷你壓縮版，此js文件相當小，只有2k大小。

下載地址：http://www.xueerxing.com/skin/ecms084/js/jquery.lazyload.min.js

（jquery.lazyload.js依賴于jquery，如果網站沒有用到jquery，那請下載jquery.js，下載地址：http://www.xueerxing.com/skin/ecms084/js/common.js）

在帝國cms模板的head區域加載此兩個js文件，代碼如下：

確保網站空間里這哥倆已經上傳并存在，并檢查此兩js文件的引用路徑是否正確，還有先后順序不要亂。

其次，就是需要一段自定義的js代碼來實現懶加載，重點在這。學而行營銷網的需求如下：

1:首頁或列表頁的圖片式布局實現懶加載；

2:網站內容文章里的圖片也比較多，最好能實現懶加載；

欲煉神功，必先自宮

欲煉神功，必先自宮。菜鳥小白請先參考網上的教程，然后再回來。

1.jquery.lazyload.js圖片延時加載插件使用教程

2.jQuery圖片懶加載 lazyload.js使用方法(深入版)

3.jQuery圖片延遲加載插件jQuery.lazyload

4.懶加載插件 – jquery.lazyload.js簡單調用

5.織夢dedecms圖片加data-original圖片延時加載功能代碼

第1項需求在帝國cms里比較好實現，因為在模板中用的是靈動標簽，可以自行對<img>元素添加樣式，尺寸及data-original等屬性，依據教程中的范例就可以實現。例如下面的這段模板中的代碼，就可以對<img>標簽加上任何屬性來達成目的。

[e:loop={‘news’,10,18,1,’istop=0 and firsttitle=0 and isgood=0′,’newstime DESC’}]
<li class=”clear”>
<div class=”imgarea fl”> <a href=”<?=$bqsr[‘titleurl’]?>” target=”_blank”><img src=”<?=$bqr[‘titlepic’]?>” alt=”<?=$bqr[‘title’]?>”> </a><span class=”cat”><a href=”<?=$bqsr[classurl]?>” target=”_blank”>
<?=$class_r[$bqr[classid]][classname]?>
</a></span> </div>
</li>

其中的<img>可以改成：<img src=”<?=$bqr[‘titlepic’]?>” alt=”<?=$bqr[‘title’]?>” width=”640″ height=”480″ data-original=”<?=$bqr[‘titlepic’]?>”>來符合jquery.lazyload.js的圖片匹配要求。

第2項是要讓內容頁中的圖片也實現懶加載，這可就麻煩了，根據教程說明，圖片<img>標簽要四大屬性：class、data-original、width、height必須同時具備，而在文章頁模板里，文章內容的調用就是一個標簽[!–newstext–]，查看內容頁生成的<img>標簽，如下：

圖片是在后臺文章更新時一起添加的，難道要添加時手動寫這四個屬性塞到[!–newstext–]去么？這是很難堅持做到的，也是易出錯笨得不能再笨的做法。

img四大屬性皆不全，這個代碼要怎么整？

沒有找到對應的教程和代碼，好在，可以去看已經用jquery.lazyload.js實現懶加載的網站html源代碼。

（提示：不要找大站，代碼復雜度高，大多抄不了。）

看了好幾天和十多家使用了jquery.lazyload.js實現延時懶加載的網站，還終于給找到了可用的實現代碼。知道了就簡單了。在</head>前加入如下代碼：

重點在標紅的.info img這，大體意思是：基于css的層級關系，這段jquery式的代碼會找到class名為info層級下的所有圖片，對它們施加魔法作用力(.lazyload()方法)。

魔法作用力

以下是網頁html中的css上下包含層級。

<div class=”info bgb”>
<div class=”info-bt”>
<h1 class=”title”>東方神話“老干媽”—陶華碧創造并守護的企業王國經管之道</h1>
<small> <span> <i class=”fa fa-user”></i></span> <span> <i class=”fa fa-rss”></i> </span><span> <i class=”fa fa-clock-o”></i>2018-03-16</span> </small> </div>
<div class=”info-zi mb15″><p> 有一個東方的神話，不做推銷，不打廣告，沒有促銷，坐在家門口，經銷商就來搶貨。不上市、不貸款、不融資。別的企業到處找貸款，拉融資，想上市，老干媽卻多次拒絕政府的融資建議。在互聯網上，出國黨們將“老干媽”的公司創始人陶華碧女士成為“國民女神”，在中國8、9塊錢一瓶的老干媽辣醬，外國要達到十幾美元，留學生依然選擇去超市買回“家的味道”。</p>
<p><img src=”/d/file/56545b7963a442d530fb5557bf3bc5e8.jpg” _src=”http://admin3.cnad.cn/ueditor/net/upload/2018-03-15/622f2570-e399-4b3f-a6bd-57e1560bc8f9.jpg” alt=”” /></p>
<p>圖片來源于網絡</p>

………….</div></div>

只要你的圖片<img>標簽是在info層級下，就會被這段代碼施加魔法，且無需為<img>標簽添加任何額外的屬性。

太好了，如法泡制。例如首頁的列表式圖文，只需改動<img>所歸屬的class名（用.號），或id名（用#號）。如下：

真是極簡實用啊。完全不需要對文章內容中的<img>元素做啥子改變！

本文是帝國cms+jquery.lazyload.js實現圖片延遲懶加載的極簡方法，那有沒有最簡的呢，應該是有。

在jquery.lazyload.js的一些教程中，說這樣設置就會將所有的img的并且擁有data-original標簽的圖片更改為懶加載。

html代碼

js代碼

$(function() {
$(“img”).lazyload();
});

</script>
以上這個最簡方法華哥沒有嘗試過，想必是沒有啥子問題。只是這種不問青紅皂白的濫施魔法，會不會有些太粗暴了！

粗暴執法