移動端圖片懶載入外掛程式

標籤：

LazyloadImg介紹

LazyloadImg 輕量級的移動端圖片懶載入外掛程式
原生js開發，不依賴任何架構或庫
支援將各種寬高不一致的圖片，自動剪下成預設圖片的寬高。比如說你的預設圖片是一張正方形的圖片，則各種寬度高度不一樣的圖片，自動剪下成正方形。
完美解決移動端開發中，使用者上傳圖片寬高不一致而導致的圖片變形的問題。
簡潔的API，讓你分分鐘入門！！！

快速入門

var lazyloadImg = new LazyloadImg({    el: ‘#ul [data-src]‘, //匹配元素    top: 50, //元素在頂部伸出長度觸發載入機制    right: 50, //元素在右邊伸出長度觸發載入機制    bottom: 50, //元素在底部伸出長度觸發載入機制    left: 50, //元素在左邊伸出長度觸發載入機制    qriginal: false, // true，自動將圖片剪下成預設圖片的寬高；false顯示圖片真實寬高    load: function(el) { //圖片載入成功後執行的回調方法，傳入一個參數        el.style.cssText += ‘-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;‘;    },    error: function(el) { //圖片載入失敗後執行的回調方法    }});//結束圖片懶載入事件監聽：lazyloadImg.end();//開始圖片懶載入事件監聽：lazyloadImg.start();

lazyloadimg 使後感溫馨提示

注意：必需給圖片添加寬度，不然圖片是不會顯示出來的，這一點很重要，對於移動端的話，我們可以使用百分比來給圖片添加寬度可以說是一個不錯的解決方案。

珠聯璧合

好東西+好東西=變成好牛的東西，lazyloadImg+animate.css 就是個好東西，沒別的。為什麼這麼說，原因也很簡單，就是在你使用這個外掛程式的時候，你還可以配合如：animate.css 動畫庫來實現各種不同的顯示效果，如果不設定，外掛程式預設的就是淡入效果。把這兩個東西有機地組合可以做出很多很炫的效果。效果怎麼炫，這個就得你自己去慢慢研究，慢慢體會了。這裡只是拋磚引玉，讓你知道這樣可以實現一些效果。

那要怎麼實現呢，其實也很簡單，你只需要在上面一坨代碼中找到

el.style.cssText += ‘-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;‘;

其中 fadeIn 就是動畫效果的名字，為了瀏覽器安全色，所以就出現了一個有-webkit-首碼和沒有-webkit-首碼的CSS3樣式，如果如果你已經引入了animate.css 動畫庫，那麼就只需要把動畫庫裡你喜歡的動畫效果名替換上面的 fadeIn 即可。如果你像我一樣是一個完美主義者，那麼當你看到 animate.css 動畫庫竟然有71k時，想必你已經難過得不要不要的了。那麼這個又怎麼最佳化呢？也很簡單。animate 在推出之初就已經為你想好了。你要做的就是，從 animate.css 檔案中複製對應的效果代碼就可以了。

例如你想使用bounceInDown 這個效果如可以這樣拷貝代碼：

@-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; }}@keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; }}.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown;}

animate 用法拓展動畫必要代碼

如果你想在自己的代碼中使用animate效果庫裡的效果，那麼你就得注意下了，這裡有個小小的坑，如果你只是複製相應的效果代碼是不會畫起來的，這又是為什麼呢？因為你還需要複製一段代碼。下面舉個例子，讓你好好的明白和感受 animate 的用法和運感。正如上面說到的，如果你僅僅只是複製了這一段代碼到自己的CSS樣式檔案裡，它是沒有任何效果的，因為你還需要把下面這段代碼一同拷貝到你的CSS樣式檔案中。

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}

那麼為什麼上面說到的 lazyloadimg 外掛程式使用animate 庫就不需要添加這段代碼呢？因為剛才說到的那一坨東西時的這行代碼

el.style.cssText += ‘-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;‘;

請仔細看看，等號右邊的代碼是不是跟下面這裡的很像，很像！！！這會你應該明白為什麼了吧？

.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}

這樣你就可以把 animate 效果庫用得爽噠噠的了。

動畫無限迴圈必要代碼

這裡還有一個坑，也就是如果你想所使用的動畫迴圈怎麼辦？同樣的方法，把下面 animate.css 檔案裡開頭的這一段代碼也放到自己的CSS樣式檔案裡就大功告成了。

.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}

移動端圖片懶載入外掛程式