這篇文章主要介紹了JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析,包括懶加載和onbeforeunload等要點的理解,需要的朋友可以參考下
淘寶圖片處理討論
淘寶網頁面很大，但是打開速度很快。其對圖片處理是運用了滾動加載，就是滾動軸滾到哪里，圖片在哪里加載。但是你想查看他的源代碼，那要費九牛二虎之力吧，因為他們代碼壓縮合并做的很好！因為圖片是滾動加載的，初始化的時候圖片不加載，那么當你在頁面底部刷新頁面的時候，底部的頁面通常不會加載出來，淘寶網的做法貌似是（因為我沒有看他們的源代碼，只是憑操作），刷新讓頁面回到頂部。
模仿淘寶，做滾動圖片加載
這里想到了三種方法：
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就可以了。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
