モバイル デバイス上の HTML ページの畫像のスクロール読み込み_(dá)html/css_WEB-ITnose
Jun 24, 2016 am 11:45 AM
現(xiàn)在、モバイルインターネットは世界中で普及しており、モバイルページの要素も豊富でカラフルになっており、モバイルページには 10 枚以上の寫真が含まれるのが普通です。しかし、比較的に言うと、多くのモバイル ユーザーは依然として 2G や 3G などのネットワークに留まっています。そのため、そのような帯域幅を持つユーザーがそのようなページを閲覧すると、ページの読み込みに 10 秒、20 秒、あるいはそれ以上かかる可能性があり、ユーザー エクスペリエンスに重大な影響を與えます。このような問題に対応するには、ページ內(nèi)の畫像をローリング方式でロードできるようにすることが非常に重要です (畫像はモニター畫面に表示されるときにロードされます)。これにより、サーバーの帯域幅を効果的に節(jié)約し、大規(guī)模な同時(shí)リクエストの問題を解決することもできます。
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 コードは次のようになります:

xSrc="http://staticone.whyt.net.cn/net/ueditor/jsp /upload/image /20150502/1430545369965005095.jpg"/>
パラメータ説明:
src: 1px * 1px GIF 透過畫像(小さいサイズ)です。 src のアドレスは間違ってはいけません (間違っているとブラウザに赤いバツが表示されます)。そのため、非常に小さな畫像に置き換えることにしました。
sytle: これは主に菊の表示背景畫像です
xSrc: これはカスタム屬性であり、正しい畫像畫像が配置されます。 。 住所。
2.3. HTMLがロードされた後、ローリングロードを?qū)g裝するには、jsファイルを?qū)毪工氡匾ⅳ辘蓼?。モバイ?インターネットの帯域幅は非常に限られており、jquery の最小の js ファイルは約 100K であるため、多くのモバイル インターネット ページは jquery の使用を放棄するでしょう。このような狀況を考慮して、ネイティブ JavaScript を使用して対応する js を自分で書きました (この js のデータ量は 3K しかありません)。この js ファイルを參照するには場(chǎng)所の要件があり、