tangram框架響應(yīng)式加載圖片方法
各種網(wǎng)站經(jīng)??吹巾?yè)面滾動(dòng)到可視區(qū)域,然后才加載相應(yīng)的圖片資源,他的本質(zhì)是什么呢?本文來(lái)分析一下很簡(jiǎn)單,就是判斷當(dāng)前元素是否是可視區(qū)域內(nèi)
假設(shè):h1 = 滾動(dòng)條滾去的高度
w1 = 滾動(dòng)條滾去的寬度
h2 = 屏幕的高度
obj 表示當(dāng)前對(duì)象 {x:當(dāng)前對(duì)象相對(duì)于文檔左上角的位置x,y:當(dāng)前對(duì)象相對(duì)于文檔左上角的y}
則應(yīng)該這樣判斷
在y軸方向上:if(obj.x>h1&&obj.x<h1+h2||obj.x+obj.offsetHeight>h1&&|obj.x+obj.offsetHeight<h1+h2){loading()}
同理在X軸方向上以此類推
如果使用tangram框架的話可以這樣寫:
baidu.more = baidu.more||{};
baidu.more.scrollLoading = (function(){
var top = baidu.page.getScrollTop(),
left = baidu.page.getScrollLeft(),
viewHeight = baidu.page.viewHeight(),
viewWidth = baidu.page.viewWidth();
var scrollLoad = function(element){
var obj = baidu.g(element)||{};
var pos = baidu.dom.getPosition(element);
if((pos.top>top&&pos.top<top+viewHeight)||
(pos.top+obj.offsetHeight>top&& pos.top+obj.offsetHeight<top+viewHeight)||
(pos.left>left&&pos.left<left+viewWidth)||
(pos.left+obj.offsetWidth>left&&pos.left+obj.offsetWidth<left+viewWidth)){
loading();
};
return {
scrollLoad :scrollLoad
}
})()
- 圍觀tangram js庫(kù)
- js類式繼承與原型式繼承詳解
- js類式繼承的具體實(shí)現(xiàn)方法
- js中繼承的幾種用法總結(jié)(apply,call,prototype)
- JavaScript是如何實(shí)現(xiàn)繼承的(六種方式)
- 深入了解javascript中的prototype與繼承
- Javascript基于對(duì)象三大特性(封裝性、繼承性、多態(tài)性)
- javascript的函數(shù)、創(chuàng)建對(duì)象、封裝、屬性和方法、繼承
- 深入理解JavaScript是如何實(shí)現(xiàn)繼承的
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- tangram.js庫(kù)實(shí)現(xiàn)js類的方式實(shí)例分析
相關(guān)文章
原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能示例
這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫字板功能,涉及javascript結(jié)合HTML5屬性動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下2018-08-08基于JavaScript打造一款桌面級(jí)便簽系統(tǒng)
本文將用html,css和JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的便簽系統(tǒng)。除非手動(dòng)清空便簽,否則便簽會(huì)一直保留,非常方便。感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-02-02用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼
用javascript動(dòng)態(tài)調(diào)整iframe高度的代碼...2007-04-04JS document對(duì)象簡(jiǎn)單用法完整示例
這篇文章主要介紹了JS document對(duì)象簡(jiǎn)單用法,結(jié)合完整實(shí)例形式詳細(xì)分析了JS document對(duì)象獲取、輸出、節(jié)點(diǎn)調(diào)用等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01小程序websocket心跳庫(kù)(websocket-heartbeat-miniprogram)
這篇文章主要介紹了小程序websocket心跳庫(kù)(websocket-heartbeat-miniprogram),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02一個(gè)封裝js代碼-----展開(kāi)收起效果示例
本文為大家介紹下一個(gè)封裝展開(kāi)收起效果js代碼;引用jQuery的框架,兼容ie6以上,火狐,谷歌,ie6沒(méi)有測(cè)試大家可以自己測(cè)試2013-07-07Js保留小數(shù)點(diǎn)的4種效果實(shí)現(xiàn)代碼分享
jvascript 計(jì)算保留小數(shù)點(diǎn)一兩位,有四種不同效果,非常適用于商城類網(wǎng)站,需要的朋友可以參考下2014-04-04關(guān)于ckeditor在bootstrap中modal中彈框無(wú)法輸入的解決方法
今天小編就為大家分享一篇關(guān)于ckeditor在bootstrap中modal中彈框無(wú)法輸入的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09