JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析
來源:易賢網(wǎng) 閱讀:939 次 日期:2016-06-23 16:01:40
溫馨提示:易賢網(wǎng)小編為您整理了“JavaScript仿淘寶頁面圖片滾動加載及刷新回頂部的方法解析”,方便廣大網(wǎng)友查閱!

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

淘寶圖片處理討論

淘寶網(wǎng)頁面很大,但是打開速度很快。其對圖片處理是運用了滾動加載,就是滾動軸滾到哪里,圖片在哪里加載。但是你想查看他的源代碼,那要費九牛二虎之力吧,因為他們代碼壓縮合并做的很好!因為圖片是滾動加載的,初始化的時候圖片不加載,那么當(dāng)你在頁面底部刷新頁面的時候,底部的頁面通常不會加載出來,淘寶網(wǎ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>

大家注意看我的兩個console輸出,console.log(imgObj[i].src );獲取的是整個瀏覽器地址!

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ū)域加載延伸

例如一個動畫效果,或者一個canvas圖片,我想達(dá)到的效果是,初始進(jìn)來不加載,當(dāng)滾動到這個動畫或者圖表上面的時候,進(jìn)行加載,那么我們就可以根據(jù)上面的代碼進(jìn)行如下改進(jìn):

$(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")); 

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

         }

})

刷新回頂部

當(dāng)我們做了可視區(qū)域加載的時候,通常讓其刷新回到頂部。像淘寶那樣。刷新回頂部。

我不知道淘寶網(wǎng)是如何做的。刷新回頂部,我用到的是onbeforeunload 事件。

onbeforeunload與onunload事件,onunload和onbeforeunload都是在刷新或關(guān)閉時調(diào)用,可以在< script>腳本中通過window.onunload來指定或者在< body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行,它還可以阻止onunload的執(zhí)行。

Onbeforeunload也是在頁面刷新或關(guān)閉時調(diào)用,Onbeforeunload是正要去服務(wù)器讀取新的頁面時調(diào)用,此時還沒開始讀??;而onunload則已經(jīng)從服務(wù)器上讀到了需要加載的新的頁面,在即將替換掉當(dāng)前頁面時調(diào)用。Onunload是無法阻止頁面的更新和關(guān)閉的。而 Onbeforeunload 可以做到。

1.頁面加載時只執(zhí)行onload

2.頁面關(guān)閉時先執(zhí)行onbeforeunload,最后onunload

3.頁面刷新時先執(zhí)行onbeforeunload,然后onunload,最后onload。

刷新回頂部就是用這個事件,可以這么寫。

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

當(dāng)網(wǎng)站所有的圖片都用了可是區(qū)域加載,css和js都合并壓縮了,那我們的網(wǎng)站速度和性能會提升很多!

假如你想做成淘寶那樣,你可以改進(jìn)一下代碼。

其實延遲加載的思路就是先把圖片放在一個data-src或者一個屬性中,當(dāng)頁面滑動到可視區(qū)域內(nèi)時,把存起來的圖片地址賦值給src就可以了。

更多信息請查看網(wǎng)絡(luò)編程
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機(jī)號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機(jī)站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)