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軸方向上以此類(lèi)推
如果使用tangram框架的話可以這樣寫(xiě)：
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類(lèi)式繼承與原型式繼承詳解
- js類(lèi)式繼承的具體實(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類(lèi)的方式實(shí)例分析
相關(guān)文章
OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)對(duì)地圖的基本操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了詳解關(guān)于webpack多入口熱加載很慢的原因，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
JS前端攻堅(jiān)Eventbus實(shí)現(xiàn)更新示例詳解
這篇文章主要為大家介紹了JS前端攻堅(jiān)Eventbus實(shí)現(xiàn)更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript仿微博發(fā)布信息案例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
禁止js文件緩存問(wèn)題是我一直遇到的大問(wèn)題，終于找到了一個(gè)比較好的辦法2010-04-04
javascript判斷并獲取注冊(cè)表中可信任站點(diǎn)的方法
這篇文章主要介紹了javascript判斷并獲取注冊(cè)表中可信任站點(diǎn)的方法,可實(shí)現(xiàn)針對(duì)域名和IP的可信任站點(diǎn)判斷功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了JS?ES5創(chuàng)建常量詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-07-07
微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實(shí)現(xiàn)示例代碼，小程序本身對(duì)http、websocket等連接均有諸多限制，所以這次項(xiàng)目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02
JavaScript實(shí)現(xiàn)刪除數(shù)組重復(fù)元素的5種常用高效算法總結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)刪除數(shù)組重復(fù)元素的5種常用高效算法,結(jié)合實(shí)例形式總結(jié)分析了javascript刪除數(shù)組重復(fù)元素的幾種常見(jiàn)操作技巧,需要的朋友可以參考下2018-01-01
javascript 根據(jù)歌名獲取播放地址和歌詞內(nèi)容
在前幾天做在線聽(tīng)歌的過(guò)程中，碰到了根據(jù)歌名獲取播放地址和LRC文件內(nèi)容的問(wèn)題，今晚花了幾個(gè)小時(shí)把接口整理了一下2009-06-06