圖片懶加載之lozad.js

時間 2020-03-05

標籤圖片加載 lozad.js lozad 欄目 JavaScript 简体版

原文原文鏈接

圖片懶加載功能在一些圖片比較多的站點中很是常見, 對於網站的訪問速度有很大的幫助和提高, 同時能夠減輕資源服務器的壓力.javascript

這裏我就用lozad.js來實現一個圖片懶加載功能.css

上個效果圖

上圖就能夠看出咱們要實現的效果, 當圖片出如今頁面中採去加載所需的圖片進行顯示,並非開始就將整個頁面的圖片一塊兒加載出來,這樣有效提升網站的性能

使用方法

cdn引入

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
複製代碼

安裝

# You can install lozad with npm 
$ npm install --save lozad
 
# Alternatively you can use Yarn 
$ yarn add lozad
 
# Another option is to use Bower 
$ bower install lozad
複製代碼

es6和CommonJS方式引入

// using ES6 modules
import lozad from 'lozad'
 
// using CommonJS modules
var lozad = require('lozad')
複製代碼

HTML中

<img class="lozad" data-src="image.png" />
複製代碼

JS中

// 基礎使用
const observer = lozad(); // 元素默認爲 '.lozad'
observer.observe();
複製代碼

// 個性配置
const observer = lozad('.lozad',{
    rootMargin: '30px 0px',
    threshold: 1
});
observer.observe();
複製代碼

// 添加生命週期
const observer = lozad('.lozad', {
    load: function(el) { // 生命週期：加載圖片前
        console.log(el.getAttribute('data-name') + '加載前(start)')
        // 須要自定義圖片src
        el.src = el.getAttribute('data-src')
    },
    loaded: function (el) { // 加載完畢，實際圖片還在pending中，頁面還沒顯示圖片
        console.log(el.getAttribute('data-name') + '加載完畢(end)')
        console.log(el)
    }
})
observer.observe() // 加載，若是有新圖片加入，再次執行便可
複製代碼

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
    <style> img { display: inline-block; width: 300px; height: 300px; background-color: beige; } </style>
</head>
<body>
    <ul>
        <li>
            <h2>第1張</h2>
            <img data-name="第1張" class="lozad" data-src="http://5b0988e595225.cdn.sohucs.com/images/20181210/f3ecdb2198864d25bf05e54d7fc37ad7.jpeg" />
        </li>
        <li>
            <h2>第2張</h2>
            <img data-name="第2張" class="lozad" data-src="http://img3.imgtn.bdimg.com/it/u=2116967214,2723885965&fm=11&gp=0.jpg" />
        </li>
        <li>
            <h2>第3張</h2>
            <img data-name="第3張" class="lozad" data-src="http://img4.imgtn.bdimg.com/it/u=3021719368,4105741738&fm=11&gp=0.jpg" />
        </li>
        <li>
            <h2>第4張</h2>
            <img data-name="第4張" class="lozad" data-src="http://img2.imgtn.bdimg.com/it/u=3988069150,2895360584&fm=26&gp=0.jpg" />
        </li>
        <li>
            <h2>第5張</h2>
            <img data-name="第5張" class="lozad" data-src="http://img4.imgtn.bdimg.com/it/u=1994004472,3641688886&fm=26&gp=0.jpg" />
        </li>
        <li>
            <h2>第6張</h2>
            <img data-name="第6張" class="lozad" data-src="http://img0.imgtn.bdimg.com/it/u=3593732750,2636518232&fm=26&gp=0.jpg" />
        </li>
        <li>
            <h2>第7張</h2>
            <img data-name="第7張" class="lozad" data-src="http://img0.imgtn.bdimg.com/it/u=1572085073,3840873353&fm=26&gp=0.jpg" />
        </li>
    </ul>
    <script> // // 基礎使用 // const observer = lozad(); // observer.observe(); // // 個性配置 // const observer = lozad('.lozad',{ // rootMargin: '10px 0px', // threshold: 0.1 // }); // observer.observe(); // 添加生命週期 const observer = lozad('.lozad', { load: function(el) { // 生命週期：加載圖片前 console.log(el.getAttribute('data-name') + '加載前(start)') // 須要自定義圖片src el.src = el.getAttribute('data-src') }, loaded: function (el) { // 加載完畢，實際圖片還在pending中，頁面還沒顯示圖片 console.log(el.getAttribute('data-name') + '加載完畢(end)') console.log(el) } }) observer.observe() // 加載，若是有新圖片加入，再次執行便可 </script>
</body>
</html>
複製代碼