Javascript 最简单的JS仅用于图像的延迟加载？（请不要依赖）

寻找一种最简单的方法： lazy load JS仅在公文包站点上加载图像

应该是任何浏览器上的工作，没有jquery请，但简单的纯js编码。 让CSS类名为“.image box”，img在哪里

网站是有响应的，但不要为不同的响应大小使用不同的图像源文件

谢谢你的帮助

这里是js代码，我尝试了这一点，但看不到渐进式图像加载：

函数init（）{
var imgDefer=document.getElementsByTagName（'img'）；
对于（var i=0；iwindow.onload=init这是我的自定义惰性加载程序，我一直想将其作为开源发布，但还没有来得及这么做

它没有依赖关系，只使用常规的domapi

它可能并不完美，但它应该让你开始。如果您需要关于如何实现缺少的导入的指针，请告诉我


import{registerViewportChangeCallback，unregisterViewportChangeCallback，
elementInView}来自“/viewportHandler”；
从“/index”导入{querySelectorAllCached}；
让lazyCache={}；
让lazyCacheList=[]；
设imgElements=null；
设allload=false；
函数removeEventListeners（el）{
el.移除EventListener（“加载”，onLoad）；
el.removeEventListener（“错误”，onError）；
}
函数onLoad（e）{
e、 target.classList.remove（'akm-lazy-load'）；
e、 target.classList.add（'akm-lazy-load'）；
removeEventListeners（如目标公司）；
}
函数onError（e）{
e、 target.classList.remove（'akm-lazy-load'）；
e、 target.classList.add（'akm-lazy-error'）；
removeEventListeners（如目标公司）；
}
函数updateImages（）{
如果（全部加载）{
回来
}
如果（！imgElements）{
//找到页面上的所有图像并从上到下排序
//这样我们就可以先开始预加载最上面的图像
imgElements=querySelectorAllCached(
'img[data src]，img[data srcset]'）
.排序（（a，b）=>{
const top=a.getBoundingClientRect（）.top；
const bTop=b.getBoundingClientRect（）.top；
如果（顶部TOP）{
返回1；
}
返回0；
});
}
for（设i=0；i是作弊吗

window.addEventListener("load", function (event) {
  var images = document.querySelectorAll('#lazy-img');
  //if the browser doesn't support IO
  if (!('IntersectionObserver' in window)) {
    LoadImagesOldWay(images);
  } else {
    createObserver(images);
  }
}, false);

function createObserver(images) {
  var options = {
    //root defaults
    root: null,
    rootMargin: "0px",
    //threshold is how much of the element is intersected before firing callback
    threshold: .01
  };
  //create an observer, add the options and callback function
  //then add each image to the observer.
  var observer = new IntersectionObserver(handleIntersect, options);
  images.forEach(function (image) {
    observer.observe(image);
  });

}
//load the smallest image for old browsers
function LoadImagesOldWay(images) {
  images.forEach(function (image) {
    var url = image.getAttribute('data-src');
    image.setAttribute('src', url);
  });
}

function handleIntersect(entries, observer) {
  // Loop through the entries
  entries.forEach(function (entry) {
    //if this entry is intersecting whatsoever
    if (entry.intersectionRatio > 0) {
      var image = entry.target;
      //we get our responsive image set
      var url = image.getAttribute('data-src');
      //and set them as the actual source
      image.setAttribute('src', url);
      //we unobserve (Separate) the image entirely
      observer.unobserve(entry.target);
      console.log('lazy-image loaded!:simpleIO.js line 49 to remove this!');
    }
  });
}

我喜欢IO，因为它非常健壮且开放。您可以使用交叉点观察者延迟加载任何内容

查看my github上具有响应图像的示例

编辑-哇错过了所有你得到的反对票。不知道为什么有人看到-1并认为它需要更糟。我认为这是一个好问题，只是措辞不好。不要让他们影响你D

所以这不是一个“为我做我的工作”的服务…@Buzz，而且“最简单的体验”是基于观点的。所以你还需要提供一些相关的代码。对不起，我是新手。代码补充。如果我进一步否决这个问题，我会得到一份技术工作吗？！？！请回复SHESH1。不要回答完全没有努力的问题。“应该可以在任何浏览器上使用”，3<代码>el.addEventListener（'load'，onLoad）；el.onLoad=onLoadO.O，4。这个“答案”真的需要一些解释…不要太在意#1.关于#2.是的，显然这需要传输，所以呢？#3是为了IE兼容性。我同意，这看起来确实很奇怪。