画像遅延表示について。

Question

現在楽天市場のショッピングモールへ出店しています。そこですでに出品している商品ページの画像を例えば、スクロールした際に読み込まれるようにしたいです。

当方はYahoo!ショッピングにも出店していて、Yahoo!ではシステムで自動で上記の様な効果がついています。

楽天市場でも同じような画像<img>はスクロールした際に読み込むように設定した場合、javascriptまたはcssなんかで可能でしょうか？

GOLDという任意で1GBのサーバースペースを与えられていて、ここでcss、html、JavaScriptなど自由に使う事が出来ます。

ご存じの方いましたら、よろしくお願い致します。

Answer 1

$(function(){
    $("img").each(function(){
        if(!$(this).hasClass("lazy")){
            $(this).addClass("lazy2");
            $(this).attr("data-original", $(this).attr("src"));
            $(this).removeAttr("src");
        }
    });
    $(".lazy2").lazyload({
        effect:"fadeIn",
        failure_limit:3
    });
});

このコードで、少なくとも既存のlazyloadの処理とは、ぶつからなくなったはずです。
ですが、最初に申し上げた通り、未検証ですので、注意をお願いします。

Comments

[YuichiKataoka]

所要でお返事が遅くなってしまいました。
確認してみます。まずは、ご連絡まで。

[YuichiKataoka]

すみません、
やってみたのですが実現できませんでした。
画像の部分は灰色のまま何も表示されませんでした。
<img>タグはclass属性は必要でしょうか？

[orange0190]

単純な確認をしました。
一応、こちらの環境(chrome 42.0 ローカル)では上記のコードで動きました。
<img>タグにclassを設定しているのは、今回の場合では既にlazyloadを適用している画像があるので、lazyloadの重ねがけを防ぐために必須です。単純にすべての画像にlazyloadを適用するなら必要ありません。

さて、実現できなかったということですが、詳しい状況を教えていただけないでしょうか。
実際のソースを提示していただければ、原因がわかるかもしれません。
また、確認したときの環境（ブラウザ）等も教えてください。

Answer 2

$(function(){
    $("img").each(function(){
        $(this).addClass("lazy");
        $(this).attr("data-original", $(this).attr("src"));
        $(this).removeAttr("src");
    });
    $(".lazy").lazyload({
        effect:"fadeIn",
        failure_limit:3
    });
});

上記がコードになります。残念ながら今すぐに検証できる環境ではないので、未検証になります。一応、試してみてください。

ちょっと考えただけでおそらくは正常に動作しないと思いますので、検証できるようになったらきちんと動作できるように作り直します。

追記
lazyloadプラグインを使用しています。

Comments

[YuichiKataoka]

今jsファイルへそのまま貼り付けて使ってみました。
ただ、当方「lazyload」は他の場所で使っていたので、その今まで使っていたところは

<img src〜>のsrcの部分を [ data-original ] に置き換えてclassは"lazy"として使っているのですがこことぶつかっているのか最初からある「lazyload」が機能しなくなってしまいました。

↑これとぶつからないように出来ますでしょうか？

[orange0190]

別回答としますので、少々お待ちください。

Answer 3

jQueryは利用できますでしょうか?
利用できるのなら、次のサイトを参考にしてはいかがでしょうか?
Lazy Load(画像の遅延読み込み)を実装する方法

追記
jQuery無しなら、以下のサイトが参考になるかもしれません。
Echo.js で画像を遅延ロード

Comments

[YuichiKataoka]

回答ありがとうございます。
LazyLoad、Echo.jsいずれも<img>タグを書き換えないといけないので、すでにある<img>タグを全て改変しなくても遅延できるような方法が助かりますが、難しいでしょうか？

[orange0190]

jQuery等で操作するのはダメでしょうか?
操作してもいいのなら、コードを考えてみますが・・・
それとも遅延読み込みをしたい画像は一部だけなのでしょうか？
一部だけの場合はちょっと難しいかもしれません。

[YuichiKataoka]

ありがとうございます。画像は<img>タグでコーディングしているもの全て対象でOKです。jQueryでも大丈夫です。教えていただけると助かります。

可能であれば、少しフェードしながら表示させたいです。