画像の遅延読み込みメソッド_html/css_WEB-ITnose

最近、以前に書いたいくつかの便利なプラグインを整理し始めました...^-^!!!

特に淘宝網や京東商事などのショッピング ウェブサイトでは、ページ情報がますます豊富で充実したものになるにつれて、 、ホームページは彼らの生命線です。 - -||||

最近、私は銀行のウェブサイトの仕事をしていましたが、それをホームページに押し込むことによってのみ、より多くの注目を集めることができるため、さまざまな営業担当者が順番にホームページのポジションを争い始めました。彼らの戦争を鎮めるために。私の寛大で寛容な一面を反映して、あははは

ホームページは彼らのニーズをすべてカバーし、彼らは満足して帰りました。しかし、技術マネージャーが来て、なぜホームページの負荷が大きいのか、だから、軽減されました。 ！ ！

最初にやるべきことは、K によって画像を縮小することです。それでは十分ではありません。それでは、本題に移ります。長いページの表示されていない部分を読み込むことはできません。トラフィックを節約することはお金を節約することを意味します。 ！ ！

アイデアは、ページ上の画像の位置を決定し、画像の位置が現在の画面の高さより大きいか小さい場合は画像を表示し、それ以外の場合は画像を非表示にします。 そもそも画像を非表示にする方法は非常に簡単です。画像を表示する必要がある場合は、 という属性を指定します。 element.src=element.getAttribute( "csii_src"); という考え方は非常にシンプルなので、コードから始めましょう。

function LazyLoad() {

var map_element = {};

var element_obj = [];
var download_count = 0;
var last_offset = -1;
var doc_body = null;
var doc_element = null;
var Lazy_load_tag = [];
function initVar(tags) {
doc_body = document.body;
doc_element = document.compatMode == 'BackCompat' ? doc_body
: document.documentElement;
lazy_load_tag = タグ || img", " iframe" ];
}
;
function initElementMap() {
for ( var i = 0, len = lagy_load_tag.length; i < len; i++) {
var el = document.getElementsByTagName(lazy_load_tag[ i]);
for ( var j = 0, len2 = el.length; j if (typeof (el[j]) == "オブジェクト"
&& el[j].getAttribute( "csii_src") ) {
element_obj.push(el[j]);
}
}
}

for ( var i = 0, len = element_obj.length; i < len; 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;
download_count++;
}
}

}

;

function initDownloadListen() {
if (!download_count)
return;
/*var offset = (window.MessageEvent && ! document.getBoxObjectFor) ? doc_body.scrollTop
: doc_element.scrollTop;*/
var offset;
if(os.firefox){
offset = doc_element.scrollTop;
}else{
offset = doc_body.scrollTop;
}

var visio_offset = offset + doc_element.clientheight;
if（last_offset == visio_offset）{
// setimeout（initdownloadlisten、200）; visio_高さ + オフセット + 20;
for (map_element の var key) {
if (img_show_height > key) {
var t_o = map_element[key];
var img_vl = t_o.length;
for ( var l = 0; l < img_vl; l++) {
element_obj[t_o[l]].src = element_obj[t_o[l]]
.getAttribute("csii_src");
}
map_element[key];
download_count--;
}
}
/ / 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;
}
return offsetTop;
}
function init(tags) {
initVar(tags);
initElementMap();
initDownloadListen();
$(window).scroll(function(){
initDownloadListen();
});
}
;
init();
}



欠点としては、ページ構造を決定する必要があり、画像の高さを設定する必要があります。そうしないと、画像の上からの高さを計算できません。注意が必要です。