人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptにて、ある要素が表示されたらとある画像を表示する、という動作をしたいのですが、スクロールされていって表示されたら画像を読み込む、というサンプルコードを教えて下さい。
要素はDIVなどのIDを指定するイメージです。
よろしくお願い致します。

●質問者: maintour15
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●300ポイント ベストアンサー

こんな感じでしょうか。

<script>
window.addEventListener("load", function() {
 function display_image_lazy() {
 Array.from(document.body.querySelectorAll("[data-image]")).forEach(function(e) {
 var y1 = window.innerHeight;
 var y2 = e.getBoundingClientRect().top;
 if (y2 <= y1) {
 if (e.dataset.image) {
 var img = document.createElement("img");
 img.src = e.dataset.image;
 e.parentNode.insertBefore(img, e.nextSibling);
 e.dataset.image = "";
 }
 }
 });
 }
 display_image_lazy();
 window.addEventListener("scroll", display_image_lazy, false);
}, false);
</script>

要素が表示されたときの画像は、data-image 属性で指定します。

...
<div data-image="/img/foo.jpg">foo</div>
...
<div data-image="/img/bar.jpg">bar</div>

data-image 属性を持つ要素が表示されたときに data-image 属性で指定された URL の IMG 要素をその直後に挿入するようにしました。
こういった感じの方がメンテナンス性が良いと思いますが、要素の ID と画像の対応をスクリプトに持っていたいのであれば、こんな感じになります。

<script>
window.addEventListener("load", function() {
 // 要素の ID と画像の URL の対応
 var image_map = {
 "foo" : "/img/foo.jpg",
 "bar" : "/img/bar.jpg",
 };
 function disp_image_lazy() {
 Array.from(document.body.querySelectorAll(".lazy_image")).forEach(function(e) {
 var y1 = window.innerHeight;
 var y2 = e.getBoundingClientRect().top;
 if (y2 <= y1) {
 if (image_map[e.id]) {
 var img = document.createElement("img");
 img.src = image_map[e.id];
 e.parentNode.insertBefore(img, e.nextSibling);
 delete image_map[e.id];
 }
 }
 });
 }
 disp_image_lazy();
 window.addEventListener("scroll", disp_image_lazy, false);
}, false);
</script>

画像が表示される要素はクラスで "lazy_image" が指定されているものにしています。
タグの様な緩い指定だと遅くなりそうなので。

...
<div class="lazy_image" id="foo">foo</div>
...
<div class="lazy_image" id="bar">bar</div>

maintour15さんのコメント
高機能なスクリプトをありがとうございます。 ご質問が悪くて申し訳ありません。 とあるIDの要素が見えたら、カッコ内の処理をする、というだけで構いませんので、数行程度の関数を教えて頂けませんでしょうかm(__)m 処理の部分は、画像広告のJavascriptを入れたり、自分で工夫致します。 見えたら実行、のみでOKです。

a-kuma3さんのコメント
「とあるIDの要素が見えたら」は、とある ID を "foo" とした場合、こうなります。 >|html| <script> window.addEventListener("load", function() { // とある要素が見えてるかどうかを判定して処理をする function display_image_lazy() { // ↓とある ID Array.from(document.body.querySelectorAll("#foo")).forEach(function(e) { var y1 = window.innerHeight; var y2 = e.getBoundingClientRect().top; if (y2 <= y1) { ★ ここに、見えたときの処理 } }); } // いきなり見えていることもあるので、最初に呼んでおく display_image_lazy(); // スクロールしたときのイベントで、毎回見えているかどうかを判定する window.addEventListener("scroll", display_image_lazy, false); }, false); </script> ||< 上記のコードでは、とある要素のIDが見えたときに、何度も実行されます。 多分、最初に見えたときだけ実行、というような処理は必要になると思います。

maintour15さんのコメント
ありがとうございますm(__)m
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ