JavaScript仿淘寶頁(yè)面圖片滾動(dòng)加載及刷新回頂部的方法解析_javascript技巧_第1頁(yè)
JavaScript仿淘寶頁(yè)面圖片滾動(dòng)加載及刷新回頂部的方法解析_javascript技巧_第2頁(yè)
JavaScript仿淘寶頁(yè)面圖片滾動(dòng)加載及刷新回頂部的方法解析_javascript技巧_第3頁(yè)
JavaScript仿淘寶頁(yè)面圖片滾動(dòng)加載及刷新回頂部的方法解析_javascript技巧_第4頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、javascript仿淘寶頁(yè)面圖片滾動(dòng)加載及 刷新回頂部的方法解析淘寶圖片處理討論淘寶網(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è)面的吋候，底部的頁(yè)面通常不會(huì)加載出 來(lái)，淘寶網(wǎng)的做法貌似是（因?yàn)槲覜](méi)有看他們的源代碼，只是憑操作），刷新讓 頁(yè)面回到頂部。模仿淘寶，做滾動(dòng)圖片加載 這里想到了三種方法：1. javascript懶加載之可視區(qū)域加載<!doctype html><h

2、tml lang=，zen><head><meta charset二utf-8><title>haorooms 前端博客-口j視區(qū)域加載之 javascript</title> <stylc>imgwidth:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;</style></hcad><body><img haoroomslazyload=/zchrysanthemum jpg src二 >&

3、lt;img haoroomslazyload=/zdesert. jpg src二 ><img haoroomslazy 1 oad=z/hydrangeas. jpgzz src二 ><img haorooms 1 az>4oad=，zkoa 1 a. jpg src二 ><img haoroomslazyload=z/lighthouse. jpg src二 ><img haoroomslazyload=/zpenguins. jpgz，src二 ><img haoroomslazyload=/tulips. jpg/z

4、src二 ><script>var imgnum=document. gctelcmentsbytognamc（，img' ） length; var imgobj=document. getelementsbytagname（z，imgz/）;var 1=0;window. onscroll=function（） var sccllcight 二 docum ent docum ent elcm ent .cli ent height;var scrolltop = document. documentelement. scrolltop document, bod

5、y. scrolltop;for(var i=l;i<imgum;i+)if(imgobji. offsettop < seeheight + scrolitop) console. iog(img0bji. get attribute (，src/，); console, log(imgobji. sre );if (imgobj i. getattribute (z，srcz，) = "“) imgobji. sre =imgobj i. getattribute (/zhaoroomslazyload/z);if(imgobji.offsettop > see

6、height + scrolltop) 1二 i； break;</script>大家注意看我的兩個(gè)console輸出，console, log(imgobj i. sre );獲取的是整 個(gè)瀏覽器地址！ 上面的js用jquery翻譯版!2.jquery懶加載之可視區(qū)域加issivar 1=0/js方法翻譯版 $ (window), bind (，z scroll, function (event) for (var i二1 ; i<$(img). length; i+) if ($ (，zimgz，). cq(i) offset () top < parseint (

7、$ (window). height() + parselnt($(window). scrolltop() if ($ (，zimg，z) eq(i) attr (，zsrc，z) = “") varlazyloadsrc=$ (j img*). eq(i). attr (haoroomslazyload，z);$ (，zimgz，) cq(i) attr ("sre", lazyloadsrc);if ($. eq(i). offset(). top > parseint($(window). height()+ parsetnt ($ (window)

8、. scrol itopo) 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(cvent) /窗口的高度+看不見(jiàn)的頂部的高度二屏幕低部距離最頂部的高度 var thisbuttomtop 二 parselnt($(window). height() + parsetnt ($ (window). scrol itopo);var thistop

9、 = parselnt($(window). scrolitopo) ; /屏幕頂部距離最 頂部的高度var picturetop = parselnt ($ c你的要滾動(dòng)加載的 id). offset (). top);if (picturetop >二 thistop && picturetop <= thisbuttomtop) / $c#你的要滾動(dòng)加載的id)attf(src，$(#你的要滾動(dòng)加載的 id"). attr (，zhaoroomslazyload，z);/此處可以執(zhí)行你的加載函數(shù)，加載函數(shù)由原來(lái)的document, ready 中，移

10、到這里來(lái)！)刷新回頂部當(dāng)我們做了可視區(qū)域加載的時(shí)候，通常讓其刷新冋到頂部。像淘寶那樣。刷新冋 頂部。我不知道淘寶網(wǎng)是如何做的。刷新回頂部，我用到的是onbeforeunload事件。 onbcforcunload 與 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í)行onload2. 頁(yè)面關(guān)閉口寸先執(zhí)行onbeforeunload,最后onunload3頁(yè)面刷新時(shí)先執(zhí)行onbeforeunload,然后onunload,最后onload。 刷新回頂部就是用這個(gè)事件，可以這么寫(xiě)。window. onbeforeunload = function()$

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論