यहाँ मेरी अपनी है। मज़े करो। (JQuery की आवश्यकता नहीं है!)
परीक्षण किया गया: IE 5.5 +, एफएफ 2 +, क्रोम, ओपेरा 9.6+
उपयोग:
अपने lazyloaded चित्र होने चाहिए उनके एक अंगूठे विशेषता में असली स्रोत
बस जावास्क्रिप्ट फ़ाइल इनलाइन या बाहरी रूप से शामिल करें।
आप अपने पूरे पेज पर इसका इस्तेमाल नहीं करना चाहते हैं, तो आप कर सकते हैं:
LazyImg().destroy(); // stop global fetching
LazyImg("watch-only-this-div");
नोट: जब आप फ़ाइल को शामिल एक वैश्विक उदाहरण पहले से ही पूरे दस्तावेज़ देख रही बनाई गई है। आपको पहले इसे रोकने की आवश्यकता है और आप अपना उदाहरण शुरू कर सकते हैं।
सेट एक कस्टम प्रीफ़ेचिंग के लिए ऑफसेट (कितनी दूर तह के नीचे चित्र प्राप्त किया जा चाहिए)
// watch the whole document
// prefetch offset: 300px
LazyImg(document, 300);
कोड:
//
// LAZY Loading Images
//
// Handles lazy loading of images in one or more targeted divs,
// or in the entire page. It also keeps track of scrolling and
// resizing events, and removes itself if the work is done.
//
// Licensed under the terms of the MIT license.
//
// (c) 2010 Balázs Galambosi
//
(function(){
// glocal variables
var window = this,
instances = {},
winH;
// cross browser event handling
function addEvent(el, type, fn) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
} else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
} else {
var old = el["on" + type];
el["on" + type] = function() { old(); fn(); };
}
}
// cross browser event handling
function removeEvent(el, type, fn) {
if (window.removeEventListener) {
el.removeEventListener(type, fn, false);
} else if (window.attachEvent) {
el.detachEvent("on" + type, fn);
}
}
// cross browser window height
function getWindowHeight() {
if (window.innerHeight) {
winH = window.innerHeight;
} else if (document.documentElement.clientHeight) {
winH = document.documentElement.clientHeight;
} else if (document.body && document.body.clientHeight) {
winH = document.body.clientHeight;
} else { // fallback:
winH = 10000; // just load all the images
}
return winH;
}
// getBoundingClientRect alternative
function findPos(obj) {
var top = 0;
if (obj && obj.offsetParent) {
do {
top += obj.offsetTop || 0;
top -= obj.scrollTop || 0;
} while (obj = obj.offsetParent); //
return { "top" : top };
}
}
// top position of an element
var getTopPos = (function() {
var dummy = document.createElement("div");
if (dummy.getBoundingClientRect) {
return function(el) {
return el.$$top || el.getBoundingClientRect().top;
};
} else {
return function(el) {
return el.$$top || findPos(el).top;
};
}
})();
// sorts images by their vertical positions
function img_sort(a, b) {
return getTopPos(a) - getTopPos(b);
}
// let's just provide some interface
// for the outside world
var LazyImg = function(target, offset) {
var imgs, // images array (ordered)
last, // last visible image (index)
id, // id of the target element
self; // this instance
offset = offset || 200; // for prefetching
if (!target) {
target = document;
id = "$document";
} else if (typeof target === "string") {
id = target;
target = document.getElementById(target);
} else {
id = target.id || "$undefined";
}
// return if this instance already exists
if (instances[id]) {
return instances[id];
}
// or make a new instance
self = instances[id] = {
// init & reset
init: function() {
imgs = null;
last = 0;
addEvent(window, "scroll", self.fetchImages);
self.fetchImages();
return this;
},
destroy: function() {
removeEvent(window, "scroll", self.fetchImages);
delete instances[id];
},
// fetches images, starting at last (index)
fetchImages: function() {
var img, temp, len, i;
// still trying to get the target
target = target || document.getElementById(id);
// if it's the first time
// initialize images array
if (!imgs && target) {
temp = target.getElementsByTagName("img");
if (temp.length) {
imgs = [];
len = temp.length;
} else return;
// fill the array for sorting
for (i = 0; i < len; i++) {
img = temp[i];
if (img.nodeType === 1 && img.getAttribute("thumb")) {
// store them and cache current
// positions for faster sorting
img.$$top = getTopPos(img);
imgs.push(img);
}
}
imgs.sort(img_sort);
}
// loop through the images
while (imgs[last]) {
img = imgs[last];
// delete cached position
if (img.$$top) img.$$top = null;
// check if the img is above the fold
if (getTopPos(img) < winH + offset) {
// then change the src
img.src = img.getAttribute("thumb");
last++;
}
else return;
}
// we've fetched the last image -> finished
if (last && last === imgs.length) {
self.destroy();
}
}
};
return self.init();
};
// initialize
getWindowHeight();
addEvent(window, "load", LazyImg().fetchImages);
addEvent(window, "resize", getWindowHeight );
LazyImg();
window.LazyImg = LazyImg;
}());
हालांकि मैं ऐसा करने के लिए इच्छुक डेवलपर्स के पीछे के कारणों को समझ सकता हूँ , मुझे पृष्ठ के कुछ हिस्सों को लोड करने के लिए प्रतीक्षा करना बहुत परेशान लगता है। इसके अलावा यदि आप तुरंत पृष्ठ के निचले भाग तक स्क्रॉल करते हैं, क्योंकि सामग्री पृष्ठ को कूदता है, इसलिए अपने तत्वों को ब्लॉक पर सेट करना सुनिश्चित करें ताकि सामग्री कूद न सके और मुझे रोए;) –
यह कूदने वाली चीज़ आसानी से तय की गई है एचटीएमएल में छवि की ऊंचाई और चौड़ाई निर्धारित करके, उदाहरण के लिए![]()
। लेखक का यह सबसे अच्छा अभ्यास है, –
cam8001