JQuery 画像遅延読み込みプラグイン、画像の長さと幅を動的に取得します Dimensions_html/css_WEB-ITnose

以前は、ウェブサイトの帯域幅が狭く、大きな写真はあまりありませんでしたが、今ではさまざまな写真ウェブサイトが雨後の筍のように湧き出ています。サーバーは抵抗しましたが、クライアントは反対しました。特にテーブル構造を持つ一部のサイトでは、画像が多すぎると必然的にページの読み込みが遅くなります。ページの読み込みが完了した後に画像を読み込むことはできますか?これは、ほとんどのサイト管理者が懸念している問題だと思います。特に JQuery の普及により、画像の遅延読み込みテクノロジは珍しいものではなくなりました。単純な遅延読み込みコードを記述したい場合は、簡単に実行できます。

一般的な img タグには src 属性があることは誰もが知っています。ブラウザは img タグを解析するときに、src 属性の値を読み取り、その値が指すアドレスから画像を取得します。 imgタグを書くときにsrc属性ではなくdata-originalに画像アドレスを書いてしまうと、ブラウザは画像アドレスに画像を取得しに行くことはなくなります。この画像をロードする必要がある場合は、data-original 属性を src 属性に変更すれば完了です。

上記はアイデアです。行動を起こしてみましょう。

<img data-original="http://www.zheng-hang.com/zb_users/upload/2015/04/201504051428245988387483.jpg">

$(function(){    $("img").each(function(i,n){        var img_path = $(n).attr("data-original");        $(n).attr("src",img_path);    })})

これは最も独創的な遅延読み込みです。なぜなら、この JS コードはページがロードされた後、つまり、ユーザーが見る 画像が表示される前からページを操作できるため、ユーザーの使用には影響しません。ただし、このコードはユーザーの多様なニーズを満たすことができません。たとえば、ページが実際の画像を読み込む前に、読み込み中の gif 画像などのデフォルト画像を表示したいと考えています。

ページの表示範囲の下にも画像があり、ユーザーが特定の高さまでスクロールした場合にのみ表示されます。このような画像は、ページが読み込まれるときに表示する必要はありません。を満たすために。現時点では、ほんの数語の JavaScript でそれを行うことはできません。jquery プラグインを自分で作成して作業を完了することができます。

以下は私が自分で書いたプラグイン jquery.lazyload.js です