モバイルデバイス上の HTML ページの画像のスクロール読み込み_html/css

現在、モバイルインターネットは世界中で普及しており、モバイルページの要素も豊富でカラフルになっており、モバイルページには 10 枚以上の写真が含まれるのが普通です。しかし、比較的に言うと、多くのモバイルユーザーは依然として 2G や 3G などのネットワークに留まっています。そのため、そのような帯域幅を持つユーザーがそのようなページを閲覧すると、ページの読み込みに 10 秒、20 秒、あるいはそれ以上かかる可能性があり、ユーザーエクスペリエンスに重大な影響を与えます。このような問題に対応するには、ページ内の画像をローリング方式でロードできるようにすることが非常に重要です (画像はモニター画面に表示されるときにロードされます)。これにより、サーバーの帯域幅を効果的に節約し、大規模な同時リクエストの問題を解決することもできます。

1. レンダリング。 herは、写真に表示されているin in in in in in in in in in in in in chrysanthemum display -

2.1である必要があります。 "200" src="http://staticone.whyt.net.cn/net/ueditor/jsp/upload/image/20150502/1430545369965005095.jpg" />

2.2. 画像を載せるスクロール読み込みに変更後、画像の HTML コードは次のようになります:

style="background:url(images/scrollLoading/loading.gif) no-repeat center;"

xSrc="http://staticone.whyt.net.cn/net/ueditor/jsp /upload/image /20150502/1430545369965005095.jpg"/>

パラメータ説明:

src: 1px * 1px GIF 透過画像（小さいサイズ）です。 src のアドレスは間違ってはいけません (間違っているとブラウザに赤いバツが表示されます)。そのため、非常に小さな画像に置き換えることにしました。

sytle: これは主に菊の表示背景画像です

xSrc: これはカスタム属性であり、正しい画像画像が配置されます。。住所。

2.3. HTMLがロードされた後、ローリングロードを実装するには、jsファイルを導入する必要があります。モバイルインターネットの帯域幅は非常に限られており、jquery の最小の js ファイルは約 100K であるため、多くのモバイルインターネットページは jquery の使用を放棄するでしょう。このような状況を考慮して、ネイティブ JavaScript を使用して対応する js を自分で書きました (この js のデータ量は 3K しかありません)。この js ファイルを参照するには場所の要件があり、タグの前の行になければなりません。そうしないとスクロール読み込みができません。

JS ダウンロードアドレス: Web サイト www.manyjar.com にアクセスし、myscrollLoading を検索してファイルのダウンロードを見つけます。

または、このリンクを直接ダウンロードしてください: http://www.manyjar.com/download?storeName=m/myscrollLoading/myscrollLoading.js

(manyjar は、非常に多数の JAR ファイルのダウンロードを提供する Web サイトです。Java 学習者または開発エンジニアの皆さん、非常に実践的な内容になっているので、ぜひ読んでみてください)

HTML コードでは、インポートされるファイルの形式は次のとおりです:

人気のチュートリアル

詳細>