图片延迟加载小脚本（原生JS）- 无需改动HTML
<script>var lazyLoad = function(){
// 根据情况替换 body img
var lazyImages = [].slice.call(document.querySelectorAll("body img"));
lazyImages.forEach(function(lazyImage) {
let src = lazyImage.src;
lazyImage.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
lazyImage.setAttribute('data-src', src);
});
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
//lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to event handlers here
}
}
document.addEventListener("DOMContentLoaded", function() {
lazyLoad();
});
</script>
[*]脚本安装到</body>结束标签后面
[*]"body img" 意思是对body内的img做延迟加载。
要是想指定区域，你需要了解css选择器
[*]"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; 是空白图片，非loading GIF（无加载特效）
先显示文字内容，再显示图片吗
为了网页速度？ andyisless 发表于 2020-11-4 20:44
先显示文字内容，再显示图片吗
为了网页速度？
文字内容本身就是先显示的，图片是后加载的。
这些图片本应该是一起加载的，延迟加载是把非可见的图片暂时用同一个图片代替（比如loading gif/或者1x1px的空白图片）减少请求，图片在可见区域立即加载或者设定距离可见区域多少像素提前加载（根据距离这种会无等待感） sead 发表于 2020-11-4 22:01
文字内容本身就是先显示的，图片是后加载的。
这些图片本应该是一起加载的，延迟加载是把非可见的图片暂 ...
o 这样的出发点
的确对速度有帮助
我看到tupa的网站，也是这样操作的，结果很多图片不显示，都是显示同一张图片
好像玩脱了，对用户体验不是很好。 sead 发表于 2020-11-4 22:01
文字内容本身就是先显示的，图片是后加载的。
这些图片本应该是一起加载的，延迟加载是把非可见的图片暂 ...
直接上插件，性能不够，再升级主机。早期能用钱解决的，少编一些代码。多花点时间研究竞争对手的外链手法，这个效率更高更快。后期几w几十w流量再研究这个，才更有价值。:) 易生挺 发表于 2020-11-5 10:21
直接上插件，性能不够，再升级主机。早期能用钱解决的，少编一些代码。多花点时间研究竞争对手的外链手法 ...
对于我这种码农出生的不写代码会手痒:lol 另外些需求找外包沟通时间大于自己动手的时间。 谷歌对网站体验明年有重要更新，如果到跟前再解决就有点跟不上节奏。外链手法：1种是砸PBN，或者买内容外链，链接自然就OK～ 目前就购买链接还需要多研究
页:
[1]