コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

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

さまざまな 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

}

})()


関連ラベル：
响应式加载 tangram
ソース：php.cn
前の記事：JSの2つの定義方法の違いと内部原理_基礎知識 次の記事：入力値を操作する jQuery のさまざまなメソッドのまとめ_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クエリと式は、新しい列を含むテーブル全体を形成します。新しい列は、他の条件列の値を含む式です。 編集: 式は「値」列、つま​​りカテゴリに基づいて最も低い user_id を持つ「値」列である必要があります。カテゴリ「A」の最も低い「user_id」の「value」列が 0....
から 2024-04-06 21:23:40
0
2
530
ASP クラシック コードを文字列として MYSQL データベースに保存する可能性 ASP クラシック コードを MySQL データベースに保存し、プルされたときにコードを実行させることは可能ですか?たとえば、変数名を文字列に保存し、それを表示する前に ASP を...
から 2024-04-06 13:38:43
0
1
358
「Cookie」リクエスト ヘッダーの Cookie の数が、「set-cookie」レスポンス ヘッダーに設定されている Cookie の数を超えるのはなぜですか? 私は Web クローリングの初心者なので、http リクエストについての理解が非常に浅いです。カートに追加など、Web サイトに送信する特定のリクエストを検査すると、開発ツールは、...
から 2024-04-05 14:52:06
0
1
3571
POST リクエストは Postman を使用している場合は正常に動作しますが、React axios と Spring Boot バックエンドを使用している場合は正常に動作しません 反応コンソールから、URL「:8080/api/review-add」を指すエラー メッセージ「リソースを読み込めません: サーバーの応答ステータスは 500()」が表示されます ...
から 2024-04-05 13:07:01
0
1
396
nginx proxy_pass 設定を変更した後、React アプリが読み込まれません ReactappNodeJS バックエンドと nginx を持っています。証明書を取得し、Certbot 経由でインストールしました。私のアプリケーションは get リクエストと ...
から 2024-04-05 11:53:10
0
1
316
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート