Network load images delayed implementation code, beyond the jquery control, March 26, 2010, save flow (transfer)

2010-06-11  来源:本站原创  分类:Web  人气:229 

Taobao, QQ, there Dangdang, Amazon, like the network has the effect of class, the principle is that to load the picture, mainly used for large-scale Web site to save bandwidth, but what they provide compression confusion not see, but also Some of what Yahoo should be based on what libraries, a word is very troublesome, JQ control Daoshi clear enough, and is still not reached the effect of saving network bandwidth, so I JQ lazy loading control on some improvements to improve future the biggest feature is the easy call, what the project does not require too much change, and JS files also.

1. Would have to bubble this is a network of development control, need a list of pages similar to Taobao effect, and further negotiation to find a lot of examples, and later wanted to delay the control directly JQ, JQ delay control, but only accelerated loading rate, there is no province-bandwidth, and this is my boss found, tested with Firefox, and finally can not, and would have to think another way to improve the look JQ, beyond what we're OK, that JQ the lazy loading did not enhance the image of the actual transmission capacity, or upon the subsequent acceptance of the code DOWN

( http://www.appelsiini.net/projects/lazyload this is the original querylazyload control Download)

2. The use of mind control. (Reprinted indicate the source, on March 26, 2010 Park, published in the blog bubble net control, thank you)

1. Reference JQ:

<!--< Br / /> <br/ /> Code highlighting produced by Actipro CodeHighlighter (freeware) <br/ /> http://www.CodeHighlighter.com/ <br/ /> <br/ /> - > <script src="js/jquery.js" type="text/javascript"> </ script>

JQ does not go online DOWN

2. To paste the following code to save JS file

<!--< Br / /> <br/ /> Code highlighting produced by Actipro CodeHighlighter (freeware) <br/ /> http://www.CodeHighlighter.com/ <br/ /> <br/ /> - > <script src="js/MinmyLazyload.js" type="text/javascript"> </ script>

Add reference

3. Call statement, and JQ touched, as you can and this call, remember that in the bottom of the page, </ BODY> tags before the call

<!--< Br / /> <br/ /> Code highlighting produced by Actipro CodeHighlighter (freeware) <br/ /> http://www.CodeHighlighter.com/ <br/ /> <br/ /> - > <script type="text/javascript"> $ ("img"). lazyload (); </ script>

Or so called

<script type="text/javascript"> $ ("img"). lazyload ((placeholder: "images / blue-loading.gif", effect: "fadeIn"));

</ Script>

Of course you have to have a blue-loading.gif image, and then get it in the images folder, the following can be called

effect setting display, the default is SHOW effect

4. Front of the IMG tag, do not put SRC, please put original label. For example,

This will not be open when the page loads a picture, and also the most critical areas, or that the code-behind Xiangmu The only change of place inside.

Well, Here is the code running,

Please indicate the source http://www.cnblogs.com/jacd/archive/2010/03/25/1696085.html ,

On March 26, 2010 Park, published in the blog bubble net control

A code with the truth

Code
<!--< Br / /> <br/ /> Code highlighting produced by Actipro CodeHighlighter (freeware) <br/ /> http://www.CodeHighlighter.com/ <br/ /> <br/ /> - >

(Function ($) (
$. Fn.lazyload = function (options) (
var settings = (
threshold: 0,
failurelimit: 0,
event: "scroll",
effect: "show", / / default effect for the 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);
));
)

this.each (function () (
var self = this;

if (settings.placeholder) (
$ (Self). Attr ("src", settings.placeholder);
)

$ (Self). One ("appear", function () (
if (! this.loaded) (
$ ("<img />")
. 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);

Seemingly hard to understand where I am optimized

JQ first to write a clear principle to lazy loading:

Suppose there are 10 000 images to be displayed on the page, JQ's first single 1W transmit pictures to the client, and then quickly load the page 10,

Saved the 9990 picture of loading time

My control works:

First one-time transfer 10 pictures to the client, load 10,

Saved the 9990 picture of loading time,

And the 9990 picture of the transmission time, this time to save the network traffic is enormous,

On large sites, these savings out of bandwidth can do things go on the sea

That is my control for the first time a value is loaded 1W empty IMG tag, which is just a little bit of string!

(IMG tag inside the original property is not treated can not be the server to the client to download the above image to go!

However, if the SRC tag images with absolute full load passed the first time, this time in the page loading speed can also make efforts to a)

Do not believe you can view pictures using the Firefox browser request, JQ control is certainly a transfer is completed! )

By the way, my method of testing JQ

http://www.appelsiini.net/projects/lazyload/enabled.html JQ control, this is a test address, with Firefox open, open firebug, and then monitor the amount of image transmission, the situation took a turn on all 6 pictures loaded, and then drag the scroll bar, when simply the implementation of the loading, or on the map:

Network load images delayed implementation code, beyond the jquery control, March 26, 2010, save flow (transfer)

Then you can test the code I

In fact, more to say,

Lazy loading just lazy load, not idle transmission

相关文章