Implement page Picture Delay loading method jquery.lazyload.js (1/2)

In the HTML code of the trial page, all the pictures to be loaded are placed in the textarea tag, which is designed to prevent these IMG tags from making requests to the server when the page is loaded, thereby reducing the number of unnecessary requests. In practice, you can also put HTML code that doesn't need to be loaded for the first time into textarea.

(function ($) {
$.fn.lazyload = function (options) {
var settings = {
threshold:0,//Valve value
failurelimit:0,
Event: "Scroll",
Effect: "Show",
Container:window
};
if (options) {
$.extend (settings, options);
}
/* Fire one Scroll event per scroll. Not one scroll event per image. */
var elements = this;
if ("scroll" = = settings.event) {
$ (Settings.container). bind ("scroll", function (event) {
var counter = 0;
Elements.each (function () {
if ($.abovethetop (this). Parent (), settings) | | $.leftofbegin ($ (this). Parent (), settings) {
/* Nothing. */
else if (!$.belowthefold (). Parent (), settings) &&!$.rightoffold ($ (this). Parent (), settings)) {
$ (this). Trigger ("appear");
} else {
if (counter++ > Settings.failurelimit) {
return false;
}
}
});
/* Remove image from the array so it's not looped next. */
var temp = $.grep (elements, function (element) {
return!element.loaded;
});
Elements = $ (temp);
});
}
This.each (function () {
var self = this;
/* When appear is triggered load original image. */
$ (self). One ("appear", function () {
if (!this.loaded) {
Alert ($ (self). Parent (). HTML ($ (self). html ());
var tmp_str = $ (self). html ();
Tmp_str = Tmp_str.replace ("<", "<");
Tmp_str = Tmp_str.replace (">", ">");
$ (self). Parent (). append (TMP_STR);
Self.loaded = true;
}
});
/* When wanted the event is triggered load original image * *
/* by triggering appear. */
if ("scroll"!= settings.event) {
$ (self). bind (Settings.event, function (event) {
if (!self.loaded) {
$ (self). Trigger ("appear");
}
});
}
});
/* Force initial check if images should appear. */
$ (Settings.container). Trigger (Settings.event);
return this;
};
/* Convenience methods in jquery namespace. */
/* Use as $.belowthefold (element, {threshold:100, Container:window}) * *
$.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 ();
};
/* Custom selectors for your convenience. */
/* Use as $ ("Img:below-the-fold"). Something () * *
$.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);

Home 1 2 last page