Tips To Hire A Web Development Company
Given the pace of technological advancements and highly-competitive business landscape, having a digital presence is a mandate for businesses to gain visibility and to ensure sustainability. A website
Read More
Lazy load Images Using jQuery / JavaScript
lazy load images using jquery
Lazy Load is a jQuery script written in JavaScript. It delays the loading of images on long web pages. All the images are loaded one by one while the page is getting scrolled. Images outside of viewport visible part of a web page won't be loaded before user scrolls to them.
Replace image src with blank image and add image source in data-src
Add this Javascript function in footer of the page this simple script helps in lazy loading of image
function loadImage (el, fn) {
var img = new Image()
, src = el.getAttribute('data-src');
img.onload = function() {
if (!! el.parent)
el.parent.replaceChild(img, el)
else
el.src = src;
var img = new Image()
, src = el.getAttribute('data-src');
img.onload = function() {
if (!! el.parent)
el.parent.replaceChild(img, el)
else
el.src = src;
fn? fn() : null;
}
img.src = src;
}
}
img.src = src;
}
function elementInViewport(el) {
var rect = el.getBoundingClientRect()
var rect = el.getBoundingClientRect()
return (
rect.top >= 0
&& rect.left >= 0
&& rect.top <= (window.innerHeight || document.documentElement.clientHeight)
)
}
rect.top >= 0
&& rect.left >= 0
&& rect.top <= (window.innerHeight || document.documentElement.clientHeight)
)
}
var images = new Array()
, query = $q('img.lazy')
, processScroll = function(){
for (var i = 0; i < images.length; i++) {
if (elementInViewport(images[i])) {
loadImage(images[i], function () {
images.splice(i, i);
});
}
};
}
;
// Array.prototype.slice.call is not callable under our old browsers
for (var i = 0; i < query.length; i++) {
images.push(query[i]);
};
, query = $q('img.lazy')
, processScroll = function(){
for (var i = 0; i < images.length; i++) {
if (elementInViewport(images[i])) {
loadImage(images[i], function () {
images.splice(i, i);
});
}
};
}
;
// Array.prototype.slice.call is not callable under our old browsers
for (var i = 0; i < query.length; i++) {
images.push(query[i]);
};
processScroll();
addEventListener('scroll',processScroll);
addEventListener('scroll',processScroll);
}(this)
The above Javascript function will help you to load images slow when the pages is scrolled. this will help webpage to load fast and prevent may HTTP request. page speed with be increased.
Confused about your business model?
Request a FREE Business Plan.
+91 ▼ Related Posts
Top 10 Software Development Companies in Dubai to Watch in 2025
Dubai has rapidly transformed into a global tech hub, attracting businesses and entrepreneurs from around the world. This vibrant city is home to some of the most innovative and forward-thinking softw
Read More
How To Do 301 Redirect to Website Domain Name
It’s a standard question that pops up. You own several domains and host duplicate copies of an equivalent site (or simply point all of them to at least one site). Your business strategy changes
Read More