網頁載入太慢怎麼辦?試試看Lazy Load吧!

0
58

當網站某頁面有大量圖片,容易造成一開始載入所需要的資源過大,就讓網站跑的很慢,一直在那邊轉 .. 在這使用者體驗至上的時代,網頁只要晚個0.幾秒,客人就跑囉!

所以要如何解決這個問題,這邊跟大家介紹這款套件,

Lazy Load

點我看看DEMO

 

原理:

你會發現,當你滑鼠往下滾時,圖片才會一張張的加載出來,跟以往網頁載完時,圖片全都載好的模式不一樣,也因為這樣,網頁速度會提快許多。

 

基礎使用:

1. 下載相關文件,並引用

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

 

2.崁入HTML

<img class="lazy" data-original="img/example.jpg" width="600" height="400">

這邊兩重點:

  • 原來引用圖片是用src,現在都改為data-original,此效果才能執行,裡面再放你的圖片路徑,後面的寬高看個人是否要加,或用css統一處裡都可以。
  • img要加class,名稱看你要取什麼都可,但注意class名稱要與初始化的元素名稱一致

 

3.初始化

$(function() {
    $("img.lazy").lazyload();
});

↑↑↑  初始化名稱要和img  class名稱一致

到目前為止,應該還算可以吧?

若有照步驟走,特效應該是可以實現了。

那接著我們來看看,lazyload還有什麼變化效果,

這邊我舉例比較常用的,官網還有說一些個人認為比較少用到的,這邊就先不說明了。

 

實戰使用:

  • 圖片浮出效果

官網介紹的最基本款初始化,圖片是沒有浮出的效果(看起來比較不炫),那如何讓圖片浮出,很簡單,我們只要加上一句小東西就好,如下:

$(function() {
     $("img.lazy").lazyload({
     	effect : "fadeIn"
     });
});

有發現我加上了什麼嗎?恩..沒錯,就是這句就有圖片浮出的效果了

 

  • 圖片放在容器內

當我們在網站開發時候,有時候可能會需要把一堆圖片放在某個容器裡,因為你不可能整個網站只有圖片而已,所以我們要知道如何把圖片包裹在一個容器裡

點我看看DEMO

那要如何著手呢,其實也很容易加上一些css和js就可以了,如下:

 

css:這邊要先定義容器寬高,並讓他超出此寬高就出現滾軸

#container {
   width: 600px;
   height: 400px;
   overflow: scroll;
}

 

js:加入這一行  container: $(“#container”),這邊是告訴jq說,你把某id當作你的容器,整體js就會像下面這樣:

$(function() {
     $("img.lazy").lazyload({
     	container: $("#container"),
     	effect : "fadeIn"
     });
 });

 

如此一來,相信這特效的變換效果,應該是能實現出來了,也能稍稍解決一次載入全部圖片,網站太慢的問題。那當然一個網站要速度變快,這只是優化的其中一個方式而已,還有一大堆方法可以讓網站變快,那就在未來日子慢慢跟各位介紹吧!

本文章所屬frankbite,未經授權,不得轉載!如需轉載,煩請通知。

如果你喜歡我們的文章,請 Follow 我們的 Facebook 專頁,會分享許多很棒的文章唷!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03