ホームページ > ウェブフロントエンド > jsチュートリアル > Tangram フレームワークのレスポンシブ読み込みイメージメソッド_JavaScript スキル

Tangram フレームワークのレスポンシブ読み込みイメージメソッド_JavaScript スキル

WBOY
リリース: 2016-05-16 17:13:19
オリジナル
1223 人が閲覧しました

さまざまな Web サイトで、ページが表示領域までスクロールされ、対応する画像リソースが読み込まれることがよくありますが、その本質は何でしょうか。この記事の分析は非常に単純で、現在の要素が表示領域

内にあるかどうかを判断するものです。

仮定: h1 = ロールアウトされたスクロール バーの高さ
w1 = ロールアウトされたスクロール バーの幅
h2 = 画面の高さ
obj は現在のオブジェクトを表します {x: 現在のドキュメントの左上隅を基準としたオブジェクト ドキュメントの左上隅を基準とした現在のオブジェクトの位置 x,y: y}

は次のように判断する必要があります: if(obj.x>h1&&obj.x

h1&&|obj.x obj.offsetHeight

X軸方向も同様

タングラムフレームワークを使用する場合は、次のように書くことができます:

コードをコピー コードは次のとおりです。
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();

varscrollLoad = function(element){

var obj = baidu.g(element)||{};

var pos = baidu.dom.getPosition(element);

if((pos.top>top&&pos.top

(pos.top obj.offsetHeight>top&& pos.top obj.offsetHeight

(pos.left>left&&pos.left

(pos.left obj.offsetWidth>left&&pos.left obj.offsetWidth

loading();

};

リターン {

scrollLoad :scrollLoad

}

})()


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート