最實(shí)用的圖片懶加載精解
圖片延遲加載也稱為懶加載，延遲加載圖片或符合某些條件時(shí)才加載某些圖片，通常用于圖片比較多的網(wǎng)頁(yè)?？梢詼p少請(qǐng)求數(shù)或者延遲請(qǐng)求數(shù)，優(yōu)化性能。
定義
圖片延遲加載也稱為懶加載，延遲加載圖片或符合某些條件時(shí)才加載某些圖片，通常用于圖片比較多的網(wǎng)頁(yè)。可以減少請(qǐng)求數(shù)或者延遲請(qǐng)求數(shù)，優(yōu)化性能。
呈現(xiàn)形式【1】延時(shí)加載，使用setTimeout或setInterval進(jìn)行加載延遲，如果用戶在加載前就離開，自然就不會(huì)進(jìn)行加載。
【2】條件加載，符合某些條件或者觸發(fā)了某些條件才開始異步加載。
【3】可視區(qū)域加載，僅僅加載用戶可以看到的區(qū)域，這個(gè)主要監(jiān)控滾動(dòng)條來(lái)實(shí)現(xiàn)，一般距離用戶看到的底邊很近的時(shí)候開始加載，這樣能保證用戶下拉時(shí)圖片正好接上，不會(huì)有礦長(zhǎng)時(shí)間的停頓。
基本步驟
【1】網(wǎng)頁(yè)中的圖片都設(shè)為同一張圖片
【2】給圖片增加data-original = "img/test.jpg"的屬性，保存圖片的真實(shí)地址
【3】當(dāng)觸發(fā)某些條件時(shí)，自動(dòng)改變?cè)搮^(qū)域的圖片的src屬性為真實(shí)的地
應(yīng)用
【點(diǎn)擊按鈕顯示圖片】
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- body{
- margin: 0;
- }
- img{
- height: 100px;
- width: 100px;
- }
- </style>
- </head>
- <body>
- <button>加載圖片</button>
- <img src="#" alt="測(cè)試" data-original = "img/test.png">
- <script>
- var oBtn = document.getElementsByTagName('button')[0];
- var oImg = document.images[0];
- oBtn.onclick = function(){
- oImg.src = "img/loading.gif";
- if(oImg.dataset){
- aftLoadImg(oImg,oImg.dataset.original);
- }else{
- aftLoadImg(oImg,oImg.getAttribute("data-original"));
- }
- }
- function aftLoadImg(obj,url){
- var oImg = new Image();
- oImg.onload = function(){
- obj.src = oImg.src;
- }
- oImg.src = url;
- }
- </script>
- </body>
- </html>
【可視區(qū)顯示圖片】
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- body{
- margin: 0;
- }
- ul{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- img{
- border: none;
- vertical-align: middle;
- }
- .in{
- border: 1px solid black;
- margin: 10px;
- text-align: center;
- height: 400px;
- width: 400px;
- float: left;
- }
- .in img{
- height: 400px;
- width: 400px;
- }
- </style>
- </head>
- <body>
- <ul class="list">
- <li class="in"><img src="img/loading.gif" alt="測(cè)試" data-original = "img/img1.gif"></li>
- <li class="in"><img src="img/loading.gif" alt="測(cè)試" data-original = "img/img2.gif"></li>
- <li class="in"><img src="img/loading.gif" alt="測(cè)試" data-original = "img/img3.gif"></li>
- <li class="in"><img src="img/loading.gif" alt="測(cè)試" data-original = "img/img4.gif"></li>
- <li class="in"><img src="img/loading.gif" alt="測(cè)試" data-original = "img/img1.gif"></li>
- <li class="in"><img src="img/loading.gif" alt="測(cè)試" data-original = "img/img2.gif"></li>
- <li class="in"><img src="img/loading.gif" alt="測(cè)試" data-original = "img/img3.gif"></li>
- <li class="in"><img src="img/loading.gif" alt="測(cè)試" data-original = "img/img4.gif"></li>
- </ul>
- <script>
- var oBtn = document.getElementsByTagName('button')[0];
- var aImages = document.images;
- loadImg(aImages);
- window.onscroll = function(){
- loadImg(aImages);
- };
- function loadImg(arr){
- for( var i = 0,len = arr.length; i < len; i++){
- if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
- arr[i].isLoad = true;
- arr[i].style.cssText = "transition: ''; opacity: 0;"
- if(arr[i].dataset){
- aftLoadImg(arr[i],arr[i].dataset.original);
- }else{
- aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
- }
- (function(i){
- setTimeout(function(){
- arr[i].style.cssText = "transition: 1s; opacity: 1;"
- },16)
- })(i);
- }
- }
- }
- function aftLoadImg(obj,url){
- var oImg = new Image();
- oImg.onload = function(){
- obj.src = oImg.src;
- }
- oImg.src = url;
- }
- </script>
- </body>
- </html>
責(zé)任編輯：chenqingxiang
來(lái)源：
博客園
