快捷導(dǎo)航

JavaScript仿淘寶頁(yè)面圖片滾動(dòng)加載及刷新回頂部的方法解析

更新時(shí)間：2016年05月24日 16:20:39 作者：Aaron

這篇文章主要介紹了JavaScript仿淘寶頁(yè)面圖片滾動(dòng)加載及刷新回頂部的方法解析,包括懶加載和onbeforeunload等要點(diǎn)的理解,需要的朋友可以參考下

淘寶圖片處理討論
淘寶網(wǎng)頁(yè)面很大，但是打開(kāi)速度很快。其對(duì)圖片處理是運(yùn)用了滾動(dòng)加載，就是滾動(dòng)軸滾到哪里，圖片在哪里加載。但是你想查看他的源代碼，那要費(fèi)九牛二虎之力吧，因?yàn)樗麄兇a壓縮合并做的很好！因?yàn)閳D片是滾動(dòng)加載的，初始化的時(shí)候圖片不加載，那么當(dāng)你在頁(yè)面底部刷新頁(yè)面的時(shí)候，底部的頁(yè)面通常不會(huì)加載出來(lái)，淘寶網(wǎng)的做法貌似是（因?yàn)槲覜](méi)有看他們的源代碼，只是憑操作），刷新讓頁(yè)面回到頂部。

模仿淘寶，做滾動(dòng)圖片加載
這里想到了三種方法：
1.javascript懶加載之可視區(qū)域加載

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>haorooms前端博客-可視區(qū)域加載之 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>

大家注意看我的兩個(gè)console輸出，console.log(imgObj[i].src );獲取的是整個(gè)瀏覽器地址！
2.jquery懶加載之可視區(qū)域加載
上面的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.可視區(qū)域加載延伸
例如一個(gè)動(dòng)畫(huà)效果，或者一個(gè)canvas圖片，我想達(dá)到的效果是，初始進(jìn)來(lái)不加載，當(dāng)滾動(dòng)到這個(gè)動(dòng)畫(huà)或者圖表上面的時(shí)候，進(jìn)行加載，那么我們就可以根據(jù)上面的代碼進(jìn)行如下改進(jìn)：

$(window).bind("scroll", function(event){

     //窗口的高度+看不見(jiàn)的頂部的高度=屏幕低部距離最頂部的高度 
      var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); 
      var thisTop = parseInt($(window).scrollTop()); //屏幕頂部距離最頂部的高度 
        var PictureTop = parseInt($("你的要滾動(dòng)加載的ID").offset().top); 
         if (PictureTop >= thisTop && PictureTop <= thisButtomTop) {
         // $("#你的要滾動(dòng)加載的ID").attr("src", $("#你的要滾動(dòng)加載的ID").attr("haoroomslazyload")); 

          //此處可以執(zhí)行你的加載函數(shù)，加載函數(shù)由原來(lái)的document.ready中，移到這里來(lái)！



         }
})

刷新回頂部
當(dāng)我們做了可視區(qū)域加載的時(shí)候，通常讓其刷新回到頂部。像淘寶那樣。刷新回頂部。
我不知道淘寶網(wǎng)是如何做的。刷新回頂部，我用到的是onbeforeunload 事件。
onbeforeunload與onunload事件,onunload和onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用，可以在< script>腳本中通過(guò)window.onunload來(lái)指定或者在< body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行，它還可以阻止onunload的執(zhí)行。
Onbeforeunload也是在頁(yè)面刷新或關(guān)閉時(shí)調(diào)用，Onbeforeunload是正要去服務(wù)器讀取新的頁(yè)面時(shí)調(diào)用，此時(shí)還沒(méi)開(kāi)始讀??；而onunload則已經(jīng)從服務(wù)器上讀到了需要加載的新的頁(yè)面，在即將替換掉當(dāng)前頁(yè)面時(shí)調(diào)用。Onunload是無(wú)法阻止頁(yè)面的更新和關(guān)閉的。而 Onbeforeunload 可以做到。
1.頁(yè)面加載時(shí)只執(zhí)行onload
2.頁(yè)面關(guān)閉時(shí)先執(zhí)行onbeforeunload，最后onunload
3.頁(yè)面刷新時(shí)先執(zhí)行onbeforeunload，然后onunload，最后onload。
刷新回頂部就是用這個(gè)事件，可以這么寫(xiě)。

window.onbeforeunload  =  function(){$(window).scrollTop(0);}

當(dāng)網(wǎng)站所有的圖片都用了可是區(qū)域加載，css和js都合并壓縮了，那我們的網(wǎng)站速度和性能會(huì)提升很多！
假如你想做成淘寶那樣，你可以改進(jìn)一下代碼。
其實(shí)延遲加載的思路就是先把圖片放在一個(gè)data-src或者一個(gè)屬性中，當(dāng)頁(yè)面滑動(dòng)到可視區(qū)域內(nèi)時(shí)，把存起來(lái)的圖片地址賦值給src就可以了。
這里我就不羅列代碼了。

您可能感興趣的文章: