首頁 > 開發者 > JavaScript
淘寶圖片處理討論
淘寶網頁面很大，但是開啟速度很快。其對圖片處理是運用了滾動式載入，就是捲軸滾到哪裡，圖片在哪裡載入。但是你想查看他的原始碼，那要費九牛二虎之力吧，因為他們代碼壓縮合并做的很好！因為圖片是滾動式載入的，初始化的時候圖片不載入，那麼當你在頁面底部重新整理頁面的時候，底部的頁面通常不會載入出來，淘寶網的做法貌似是（因為我沒有看他們的原始碼，只是憑操作），重新整理讓頁面回到頂部。
模仿淘寶，做滾動圖片載入
這裡想到了三種方法：
1.javascript懶載入之可視地區載入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>haorooms前端部落格-可視地區載入之 javascript</title> <style> img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;} </style></head><body> <img haoroomslazyload="Chrysanthemum.jpg" src="" > <img haoroomslazyload="Desert.jpg" src="" > <img haoroomslazyload="Hydrangeas.jpg" src="" > <img haoroomslazyload="Koala.jpg" src="" > <img haoroomslazyload="Lighthouse.jpg" src="" > <img haoroomslazyload="Penguins.jpg" src="" > <img haoroomslazyload="Tulips.jpg" src="" > <script> var imgNum=document.getElementsByTagName('img').length; var imgObj=document.getElementsByTagName("img"); var l=0; window.onscroll=function(){ var seeHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i=l;i<imgNum;i++){ if(imgObj[i].offsetTop < seeHeight + scrollTop){ console.log(imgObj[i].getAttribute("src")); console.log(imgObj[i].src ); if(imgObj[i].getAttribute("src") == ""){ imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload"); } } if(imgObj[i].offsetTop > seeHeight + scrollTop){ l=i; break; } } }</script>
大家注意看我的兩個console輸出，console.log(imgObj[i].src );擷取的是整個瀏覽器地址！
2.jquery懶載入之可視地區載入
上面的js用jquery翻譯版！
var l=0//js方法翻譯版$(window).bind("scroll", function(event){ for(var i=l;i<$("img").length;i++){ if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){ if($("img").eq(i).attr("src") == ""){ var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload"); $("img").eq(i).attr("src",lazyloadsrc); } } if($("img").eq(i).offset().top > parseInt($(window).height()) + parseInt($(window).scrollTop())){ l=i; break; } } });
3.可視地區載入延伸
例如一個動畫效果，或者一個canvas圖片，我想達到的效果是，初始進來不載入，當滾動到這個動畫或者圖表上面的時候，進行載入，那麼我們就可以根據上面的代碼進行如下改進：
$(window).bind("scroll", function(event){ //視窗的高度+看不見的頂部的高度=螢幕低部距離最頂部的高度 var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); var thisTop = parseInt($(window).scrollTop()); //螢幕頂部距離最頂部的高度 var PictureTop = parseInt($("你的要滾動式載入的ID").offset().top); if (PictureTop >= thisTop && PictureTop <= thisButtomTop) { // $("#你的要滾動式載入的ID").attr("src", $("#你的要滾動式載入的ID").attr("haoroomslazyload")); //此處可以執行你的載入函數，載入函數由原來的document.ready中，移到這裡來！ }})
重新整理回頂部
當我們做了可視地區載入的時候，通常讓其重新整理回到頂部。像淘寶那樣。重新整理回頂部。
我不知道淘寶網是如何做的。重新整理回頂部，我用到的是onbeforeunload 事件。
onbeforeunload與onunload事件,onunload和onbeforeunload都是在重新整理或關閉時調用，可以在< script>指令碼中通過window.onunload來指定或者在< body>裡指定。區別在於onbeforeunload在onunload之前執行，它還可以阻止onunload的執行。
Onbeforeunload也是在頁面重新整理或關閉時調用，Onbeforeunload是正要去伺服器讀取新的頁面時調用，此時還沒開始讀取；而onunload則已經從伺服器上讀到了需要載入的新的頁面，在即將替換掉當前頁面時調用。Onunload是無法阻止頁面的更新和關閉的。而 Onbeforeunload 可以做到。
1.頁面載入時只執行onload
2.頁面關閉時先執行onbeforeunload，最後onunload
3.頁面重新整理時先執行onbeforeunload，然後onunload，最後onload。
重新整理回頂部就是用這個事件，可以這麼寫。
window.onbeforeunload = function(){$(window).scrollTop(0);}
當網站所有的圖片都用了可是地區載入，css和js都合并壓縮了，那我們的網站速度和效能會提升很多！
假如你想做成淘寶那樣，你可以改進一下代碼。
其實消極式載入的思路就是先把圖片放在一個data-src或者一個屬性中，當頁面滑動到可視地區內時，把存起來的圖片地址賦值給src就可以了。
這裡我就不羅列代碼了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
