大家好，我是前端嵐楓，一枚二線城市的程序媛，今天主要跟大家分享我整理的前端性能優化的重要方案：圖片懶加載，主要包括其原理，我們常用的一些插件，及編寫源碼實現圖片懶加載功能等，圖片懶加載是項目比較常見的性能優化方案，也是面試中常遇到的問題。希望下面文章對大家有所幫助。
1. 什麼叫懶加載？
懶加載也叫延遲加載或按需加載，比如圖片延遲加載或符合某些條件時才加載某些圖片。
2. 使用場景：
當我們進入到某個頁面的時候，會加載許多圖片，有些圖片可能在下面，當我們點進頁面但沒有滾動全部展示時，其實下面的圖片是沒有作用的，這個時候如果是加載了也相當於白加載，而且還降低了網頁的加載速度，那懶加載就是隻有滾動到可視區域時才加載當前的圖片，也就是說不是一次性加載所有的圖片，加快了頁面渲染速度，從而在一定程度上減少服務器的請求及寬帶，讓第一次打開頁面的速度變快。
3. 懶加載的優點
提高前端性能，圖片在需要的時候才加載，減輕服務器的負擔，提高頁面的加載速度，能夠減少帶寬。
4. 實現原理
圖片的加載是由src的值引起的，當對src賦值時，瀏覽器會請求圖片資源，基於這個，可以利用html5的屬性data-xxx來保存圖片的路徑，當我們需要加載圖片的時候纔將data-xxx的值賦予src,就能實現突破的按需加載，也就是懶加載了。
5. 實現方案
- 把所有需要延遲加載的圖片用一個盒子包起來，設置寬高和默認佔位圖。
- 開始讓所有的img的src爲空，把真實圖片的地址放到img的自定義屬性上，讓img隱藏屬性
- 等到所有其他資源加載完後，我們再開始加載圖片
- 對於很多圖片，需要當頁面滾動的時候，當前圖片區域完全顯示出來後再加載真實圖片
6. 常用懶加載插件
jQuery圖片延遲加載插件jQuery.lazyload
插件地址： https://plugins.jquery.com/lazyload/
- 使用方法
引用jQuery和jQuery.lazyload.js到頁面
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>
- html圖片調用方法
圖片路徑和引用方法用data-original
<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
- js調用
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
vue圖片懶加載--vue-lazyload的使用
- 安裝
npm install vue-lazyload --save-dev
- vue 項目中引入
main.js全局引入
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 或添加配置參數
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt:2
})
7.編寫代碼實現圖片懶加載
- 以上是圖片展示圖片懶加載過程原理：
- 簡易功能實現核心代碼
//html 代碼
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>圖片懶加載</title>
<style>
* {
margin: 0;
padding: 0;
}
.imgBox {
margin: 330px auto;
width: 800px;
height: 300px;
overflow: hidden;
background: gray;
}
.imgBox img {
display: none;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div class="imgBox">
<img src=""
data-img="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7eb2d4d58f344ada9cb4651e8eefe0f2~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp"
alt="" />
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="lazyload.js"></script>
</body>
</html>
//lazyload.js代碼
(function($){
var $imgBox = $('.imgBox');
var $imgs = $imgBox.find('img');
var $window = $(window);
$window.on('scroll', function(){
if($imgs.isLoad){
//之前加載過則不會重新加載
return ;
}
var $A = $imgBox.offset().top + $imgBox.outerHeight()
var $B = $window.scrollTop()+ $window.outerHeight()
if($A <= $B){
$imgs.attr('src',$imgs.data('img'))
$imgs.on('load',function(){
$imgs.stop().fadeIn();
})
$imgs.attr('isLoad', true)
}
})
})(jQuery)
- 稍微複雜功能實現代碼
// html代碼
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 800px;
margin: 0 auto;
}
.imgBox{
margin-bottom:20px;
height: 300px;
overflow: hidden;
background: gray;
}
.imgBox img{
display: none;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<!-- <div class="imgBox">
<img src="" data-img="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7eb2d4d58f344ada9cb4651e8eefe0f2~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp" alt="" />
</div> -->
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="lazyload2.js"></script>
</body>
</html>
//lazyload2.j
(function($){
var $container = $('#container');
var $window = $(window);
var str = ''
// 模擬數據
for(var i=0; i<=19; i++){
str += '<div class="imgBox">'+
'<img src=" " data-img="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7eb2d4d58f344ada9cb4651e8eefe0f2~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp" alt="" />'+
'</div>'
}
$container.html(str)
var $imgBox = $container.find('.imgBox');
//多張圖片加載
$window.on('scroll', function(){
//獲取瀏覽器底邊框距離body的距離
var $B = $window.scrollTop()+ $window.outerHeight();
//循環每個圖片區域，根據自己區域距離body的距離，計算出裏面的圖片是否加載
$imgBox.each(function(index, item){
var item = $(item);
var $A = item.offset().top + item.outerHeight();
var $imgs = item.find('img');
if($imgs.isLoad){
//之前加載過則不會重新加載
return ;
}
if($A<= $B){
$imgs.attr('src',$imgs.data('img'))
$imgs.on('load',function(){
$imgs.stop().fadeIn();
})
$imgs.attr('isLoad', true)
}
})
})
})(jQuery)
關注公衆號：程序員石磊 回覆：002 即可獲取源碼