jquery - 画像の読み込みを無効にするチャンス

Question

（jQueryを使用して）特定の画像がモバイルデバイスによってロードされないようにすることは可能ですか？すでにjQueryプラグインはありますか？

例：「toobig」クラスのすべての画像がモバイルデバイスによって読み込まれないようにします。

お待ち頂きまして、ありがとうございます。

score 0 · Accepted Answer

それらがロードされないようにする方法はないと思いますが、ブラウザがロードしようとするものを変更するために、これらの要素の属性を変更するだけで済みます。

$('img.toobig')
    .attr({'width' : 0, 'height' : 0, 'src' : 'path/to/small/image.png'})
    .hide();

上記は、関連する画像を見つけて、それらにheightとwidthを与えます0（したがって、レイアウトエンジンはドキュメントをすばやくフロー/リフローできsrc、理想的には小さな透明な画像ファイルになります。もちろん、必要に応じて簡単removeAttr('src')にできます。

最後の呼び出しhide()は、のサイズであっても0、画像がドキュメントに表示されないようにすることです。remove()もちろん、この場合は代わりに使用できます。

score 0 · Accepted Answer

可能ですが、次のようにモバイルではないことがわかっている場合にのみロードすることをお勧めします。

$('.toobig').each(function(){
    $(this).replaceWith('<img src="'+$(this).data('src')+'" />');
});

次のように、「src」のデータ属性を使用して、モバイルにロードしたくない画像を表すスパンのようなものがある場合:

<span class="toobig" data-src="/your/location/image.jpg"></span>

これを拡張して、代替テキストなどを追加できます。

2 に答える 2