自己研究了一阵子，发现一个js就能搞定的事情，没必要像网上以及AI说的那么复杂。
<!--这个适用于img的src标签，如果是背景图片的URL，移步第二种-->
<img class="lazyload" data-src="<?php showThumbnail($this); ?>" src="loading.gif" alt="">这里data src是真实地址，src相当于一个加载gif的占位符，src地址需要填写你的加载占位符地址。
Js代码
<script>
window.addEventListener('DOMContentLoaded', function() {
var lazyImages = document.querySelectorAll('img[data-src]');
function lazyLoad() {
for (var i = 0; i < lazyImages.length; i++) {
if (lazyImages[i].getBoundingClientRect().top <= window.innerHeight && lazyImages[i].getAttribute('data-src')) {
lazyImages[i].src = lazyImages[i].getAttribute('data-src');
lazyImages[i].removeAttribute('data-src');
}
}
}
// 监听滚动事件
window.addEventListener('scroll', lazyLoad);
// 或者可以监听其他事件，例如鼠标滚动
// window.addEventListener('mousewheel', lazyLoad);
// 页面加载完成后立即执行一次图片懒加载
lazyLoad();
});
</script>JS代码放进页脚位置。上述代码适用于img标签的，如果你想将这个功能应用到背景图片的懒加载，需要对代码进行一些调整，比如选择带有 data- bg 属性的元素，并设置其 backgroundImage 属性。
这里用AI对比我的JS生成了一个实例，这个实例适用于背景图片的懒加载。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<a class="media-content" title="<?php $this->title()?>" href="<?php $this->permalink()?>" data-bg="<?php $this->fields->bimg();?>" style='background - image:url("placeholder.jpg");'></a>
<script>
window.addEventListener('DOMContentLoaded', function () {
var lazyBackgrounds = document.querySelectorAll('.media-content[data-bg]');
function lazyLoad() {
for (var i = 0; i < lazyBackgrounds.length; i++) {
if (lazyBackgrounds[i].getBoundingClientRect().top <= window.innerHeight && lazyBackgrounds[i].getAttribute('data-bg')) {
var bgUrl = lazyBackgrounds[i].getAttribute('data-bg');
lazyBackgrounds[i].style.backgroundImage = 'url(' + bgUrl + ')';
lazyBackgrounds[i].removeAttribute('data-bg');
}
}
}
window.addEventListener('scroll', lazyLoad);
lazyLoad();
});
</script>
</body>
</html>
评论 (2)