Network image lazy loading implementation code beyond jquery control_javascript skills

Taobao, QQ, Dangdang, Amazon and other websites all have this effect. The principle is to load images in sections, which is mainly used for large websites to save bandwidth. However, the things they provide are compressed and confusing, and some of them require Based on some Yahoo library, it is very troublesome in short. JQ's control is clear enough, but it still does not achieve the effect of saving network bandwidth, so I made some improvements on the JQ lazy loading control. The biggest feature after the improvement is It is easy to call, does not require many changes in the project, and the JS file is not large. (Worker of Paopao.com! Please indicate the source for reprinting, thank you)
1. To develop controls for Paobu.com, I originally wanted to use JQ’s delay control directly, but JQ’s delay control only speeds up the loading speed and does not save bandwidth. That is to say, JQ’s lazy loading does not actually increase the image transmission volume. I don’t understand. I would like to ask you to DOWN the code and then accept it
　{http://www.appelsiini.net/projects/lazyload This is the original JQ Download address of the control}
2. Pay attention to the usage of this control.
1. Quote JQ:

Copy code The code is as follows:

JQ If you don’t have it, go online DOWN
2 .Save the code posted below as a JS file

Copy the code The code is as follows:

Add reference
3. Call the statement and have a touch with JQ Similarly, you can also call it like this. Remember to call

at the bottom of the page, before the tag. Copy the code . The code is as follows :

Or call it like this

Copy code The code is as follows:

Of course you have to First there is a blue-loading.gif picture, and then it must be called under the images folder.
Set the display effect after the effect. The default is the SHOW effect.
4. Do not put it in the IMG tag at the front desk SRC, please put the original tag. For example,
This way, the image will not be loaded when the page is opened. This is also the most critical point, or the only thing that needs to be changed in the background code of the project.
There is code and there is truth
Code

Copy code The code is as follows:

(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold: 0,
failurelimit: 0,
event: "scroll",
effect: "show",//默认效果为show
container: window
};
if (options) {
$.extend(settings, options);
}
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {
var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)
) {
self.loaded = false;
}
else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
self.loaded = false;
$(this).trigger("appear");
}
else {
self.loaded = true;
if (counter > settings.failurelimit) {
return false;
}
}
});
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}
/**Sanchao Control--Work**/
this.each(function() {
var self = this;
if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
}
$(self).one("appear", function() {
if (!this.loaded) {
$("")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
$(settings.container).trigger(settings.event);
return this;
};
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top settings.threshold $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left settings.threshold $(element).width();
};
$.extend($.expr[':'], {
"below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
/**

It seems difficult for people to understand where I have optimized it.
First write down clearly the JQ lazy loading principle:
Suppose there are 10,000 images to be displayed on the page. JQ first transfers 10,000 images to client, and then the page quickly loads 10 pictures,
Save the loading time of 9990 pictures
My control principle:
First send 10 pictures to the client at one time, load 10 pictures,
It saves the loading time of 9990 pictures,
and the transmission time of 9990 pictures. The network traffic saved at this time is huge.
For large websites, these saved bandwidth can be used for things It’s gone
In other words, my control only loaded 1W IMG tags with empty values ​​for the first time, which is just a little string!
(It is impossible to download the server image to the client without processing the original attribute in the IMG tag!
But if you use the SRC tag image, it will definitely be loaded the first time. At this time, We can only work on the page loading speed)
If you don’t believe it, you can use Firefox to view the image request. The JQ control will definitely complete the transmission in one go! )
By the way, let me tell you about my method of testing JQ
http://www.appelsiini.net/projects/lazyload/enabled.html This is the test address of the JQ control. Open it with Firefox, open firebug, and then monitor The amount of image transfer, the situation is that all 6 images are loaded as soon as they are opened, and when the scroll bar is dragged again, the loading function is simply executed, as shown in the picture above:

Source http://www.cnblogs.com/jacd/archive/2010/03/25/1696085.html