page_image 特殊効果で画像の遅延読み込みを実装する JS コードの一部

関連アドレス:
http://list.taobao.com/browse/30-50029375/n-1----------------------0-- -------はい-------g,ge3denzxhazdumzsgy3tsnzq-----------------------42-grid-commend-0-all -50029375.htm?TBG=14153.14.7&ssid=r18-s18

http://shop.qq.com/shopList.html
firebug を使用して確認すると、スクロール 対応する行に到達すると、現在の行の画像がすぐにロードされます。このようにして、ページを開いたときに表示されている領域の画像のみが追加され、他の非表示の画像はロードされません。これにより、確実に速度が向上します。ページの読み込み速度を比較します。長いページの場合、このソリューションの方が優れています。
実装原則

遅延ロードする必要があるすべての画像を次の形式に変更します:



次に、ページが読み込まれるときに、lazy_src を使用してすべての画像を配列に保存し、スクロール時に表示される領域の上部を計算し、遅延して読み込まれる画像の上部を より小さくします。現在の表示領域内のピクチャの src 値 (つまり、ピクチャが表示領域に表示される) を Lazy_src に置き換えます (ピクチャをロード)

Code

コードをコピー コードは次のとおりです:

lazyLoad=(function() {
var map_element = {};
var element_obj = [];
var last_offset = -1;
var doc_element;
doc_element = = 'BackCompat' ? document.documentElement;
lazy_load_tag = タグ ||
関数 initElementMap () {
var all_element = [];
//すべての関連要素から遅延ロードする必要がある要素を見つけます
for (var i = 0,
len = Lazy_load_tag.length; i var el = document.getElementsByTagName(lazy_load_tag[i]);
for (var j = 0,
len2 = el.length; j
if (typeof(el) [j]) == "オブジェクト" && el[j].getAttribute("lazy_src")) {
element_obj.push(all_element[key])
}
}
}

for (var i = 0,
len = element_obj.length; i
var o_img = element_obj[i];
var t_index = getAbsoluteTop(o_img); //ドキュメントに対する画像の上部の距離を取得します
if (map_element[t_index]) {
map_element[t_index].push(i); else {
//上記の距離に応じてキュー
var t_array = [];
t_array[0] = i;
map_element[t_index] = t_array;// 遅延読み込みが必要な画像数
}
}

};
function initDownloadListen() {
if (!download_count) return;
var offset = (window.MessageEvent && !document .getBoxObjectFor) ? .scrollTop: doc_element.scrollTop;
//ビジュアル領域のオフセット = ドキュメントの高さ
var visio_offset = offset doc_element.clientHeight;
if (last_offset == visio_offset) {
setTimeout (initDownloadListen, 200);
return;
last_offset = visio_offset;
var img_show_height = visio_height offset; ) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length
for (var l = 0; l element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("lazy_src");
}
map_element[key] を削除します-- ;
}
}
setTimeout(initDownloadListen, 200);
function getAbsoluteTop(element) {
if (arguments.length != 1 || element == null ) {
return null;
}
var offsetTop = element.offsetTop;
while (element = element.offsetParent) {
offsetTop = element.offsetTop;
}
関数 init(タグ) {
initElementMap();
return {
init: init
}
})();


使い方: ページ上の遅延読み込みが必要な画像のsrcをlazy_srcに変更し、上記のjsを置きます。最後に、lazyLoad.init();
を呼び出します。簡単に言うと、firebug を使用して、画像の読み込みが遅延しているかどうかを確認します。
さらに:
ページにコンテンツが切り替わる列がある場合、コンテンツ内の画像が切り替え中に表示されない場合があります。解決策は、次のようにコンテンツ中に画像を個別に読み込むことです。 🎜>



コードをコピーします


コードは次のとおりです:


///コンテンツを切り替えるコード...
chlid.find("img[init_src]").each(function(){
$(this).attr("src",$(this).attr("init_src"));
$ (this).removeAttr("init_src");