图片延迟加载小脚本（原生JS）- 无需改动HTML

sead

1. <script>
   
2.     var lazyLoad = function(){
   
3.         // 根据情况替换 body img
   
4.         var lazyImages = [].slice.call(document.querySelectorAll("body img"));
   
5.         lazyImages.forEach(function(lazyImage) {
   
6.             let src = lazyImage.src;
   
7.             lazyImage.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
   
8.             lazyImage.setAttribute('data-src', src);
   
9.         });
   
10.         if ("IntersectionObserver" in window) {
    
11.             let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
    
12.                 entries.forEach(function(entry) {
    
13.                 if (entry.isIntersecting) {
    
14.                     let lazyImage = entry.target;
    
15.                     lazyImage.src = lazyImage.dataset.src;
    
16.                     //lazyImage.classList.remove("lazy");
    
17.                     lazyImageObserver.unobserve(lazyImage);
    
18.                 }
    
19.                 });
    
20.             });
    
21.         
    
22.             lazyImages.forEach(function(lazyImage) {
    
23.                 lazyImageObserver.observe(lazyImage);
    
24.             });
    
25.         } else {
    
26.             // Possibly fall back to event handlers here
    
27.         }  
    
28.     }
    
29. 
    
30.     document.addEventListener("DOMContentLoaded", function() {  
    
31.         lazyLoad();
    
32.     });
    
33. </script>

复制代码

• 脚本安装到</body>结束标签后面
• "body img" 意思是对body内的img做延迟加载。
  要是想指定区域，你需要了解css选择器
• "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; 是空白图片，非loading GIF（无加载特效）
  

andyisless

先显示文字内容，再显示图片吗

为了网页速度？

sead

andyisless 发表于 2020-11-4 20:44
先显示文字内容，再显示图片吗

为了网页速度？

文字内容本身就是先显示的，图片是后加载的。
这些图片本应该是一起加载的，延迟加载是把非可见的图片暂时用同一个图片代替（比如loading gif/或者1x1px的空白图片）减少请求，图片在可见区域立即加载或者设定距离可见区域多少像素提前加载（根据距离这种会无等待感）

andyisless

sead 发表于 2020-11-4 22:01
文字内容本身就是先显示的，图片是后加载的。
这些图片本应该是一起加载的，延迟加载是把非可见的图片暂 ...

o 这样的出发点

的确对速度有帮助

我看到tupa的网站，也是这样操作的，结果很多图片不显示，都是显示同一张图片

好像玩脱了，对用户体验不是很好。

易生挺

sead 发表于 2020-11-4 22:01
文字内容本身就是先显示的，图片是后加载的。
这些图片本应该是一起加载的，延迟加载是把非可见的图片暂 ...

直接上插件，性能不够，再升级主机。早期能用钱解决的，少编一些代码。多花点时间研究竞争对手的外链手法，这个效率更高更快。后期几w几十w流量再研究这个，才更有价值。

sead

易生挺 发表于 2020-11-5 10:21
直接上插件，性能不够，再升级主机。早期能用钱解决的，少编一些代码。多花点时间研究竞争对手的外链手法 ...

对于我这种码农出生的不写代码会手痒 另外些需求找外包沟通时间大于自己动手的时间。 谷歌对网站体验明年有重要更新，如果到跟前再解决就有点跟不上节奏。  外链手法：1种是砸PBN，或者买内容外链，链接自然就OK～ 目前就购买链接还需要多研究