网站图片使用懒加载用于提高网站的访问速度
代码使用方法也及其简单
默认的图片在代码中输出的格式是<img src="" alt="">只需要将代码中的src=""修改为data-src=""即可。
使用的时候多尝试，在banner或者是Logo出尽量不要使用或者是网站开屏就能看到的图片的地方少用可能会引起错误。
以下是完整的图片懒加载源码
<script>
$(document).ready(function() {
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function lazyLoadImages() {
$('img[data-src]').each(function() {
if (isElementInViewport(this)) {
$(this).attr('src', $(this).data('src'));
$(this).removeAttr('data-src');
} else {
$(this).attr('src', '/skin/images/placeholder.gif');
}
});
}
$(window).on('scroll', lazyLoadImages);
lazyLoadImages();
});
</script>以上代码中的/skin/images/placeholder.gif为占位符，将占位符修改为你自己的即可，主要作用是在图片没有加载完成或者是图片加载错误时显示这张图片，否则会直接显示错误信息降低网站体验度。
需要注意的是以上代码需要配合jquery-3.6.0.min.js一起使用，否则不生效，其他版本的jquery没有尝试过请自行尝试。
这是使用IntersectionObserver API和requestAnimationFrame的优化版本。
<script>
$(document).ready(function() {
var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var lazyImage = entry.target;
lazyImage.src = $(lazyImage).data('src');
$(lazyImage).removeAttr('data-src');
imageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImage.src = '/skin/images/placeholder.gif';
imageObserver.observe(lazyImage);
});
});
</script>第三次优化版，使用了本地缓存功能避免重复的请求资源。
<script>
$(document).ready(function() {
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function lazyLoadImages() {
$('img[data-src]').each(function() {
var cachedSrc = localStorage.getItem($(this).data('src'));
if (cachedSrc) {
$(this).attr('src', cachedSrc);
$(this).removeAttr('data-src');
} else if (isElementInViewport(this)) {
$(this).attr('src', $(this).data('src'));
$(this).removeAttr('data-src');
var img = new Image();
img.src = $(this).data('src');
img.onload = function() {
localStorage.setItem($(this).data('src'), $(this).data('src'));
}.bind(this);
} else {
$(this).attr('src', '/skin/images/placeholder.gif');
}
});
}
$(window).on('scroll', lazyLoadImages);
lazyLoadImages();
});
</script>这是第四版的修改，取消了占位符增加了延迟加载，主要是经过测试后占位符不是那么美观，但是又不能影响效果。
<script>
$(document).ready(function() {
var cachedImages = {};
var preloadBuffer = 200;
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function loadImage($image, dataSrc) {
if (cachedImages[dataSrc]) {
$image.attr('src', cachedImages[dataSrc]);
$image.removeAttr('data-src');
} else {
$image.attr('src', dataSrc);
$image.removeAttr('data-src');
var img = new Image();
img.src = dataSrc;
img.onload = function() {
cachedImages[dataSrc] = dataSrc;
localStorage.setItem(dataSrc, dataSrc);
};
}
}
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
var $image = $(entry.target);
var dataSrc = $image.data('src');
loadImage($image, dataSrc);
observer.unobserve(entry.target);
}
});
}, { rootMargin: preloadBuffer + 'px' });
$('img[data-src]').each(function() {
observer.observe(this);
});
$(window).on('scroll', function() {
$('img[data-src]').each(function() {
var $image = $(this);
var dataSrc = $image.data('src');
if (isElementInViewport(this)) {
loadImage($image, dataSrc);
}
});
});
});
</script>需要根据你的实际情况进行一些调整。在图片加载完成后添加一些过渡效果，或者在图片加载失败时添加一些错误处理等。
