如何对ES5中从服务器返回的图像实施延迟加载？

Question

在一页上，我试图延迟加载可能数百个从服务器作为blob返回的图像。我曾尝试将它们转换为base64数据uri，然后使用一些延迟加载技术，但可以理解的是这没有用，因为数据uri已经在html中，这意味着浏览器仍然需要加载图像数据，即使它不是马上显示出来。

是否有某种方式可以延迟加载服务器作为blob返回的动态图像？还是通过某种方式将其转换为使用远程图像url，然后以这种方式使用典型的延迟加载？

感谢您的帮助。

Answer 1

ES5方法：XMLHttpRequest

在这种情况下，您会从ajax请求中获得一个arraybuffer，必须先将其转换为base64字符串，然后才能使用。 （IE10 +兼容方法）

let myImg = document.getElementById('myImg');
let url = "https://placekitten.com/200/300";

let request  = new XMLHttpRequest();
request.open ("GET", url, true);
request.responseType  = "arraybuffer";
request.send (null);

request.onreadystatechange= function(response){
  if (request.readyState === 4) {
    if (request.status === 200) {
      // convert received arrayBuffer into base64 encoded string
      var imgBase64 = btoa(String.fromCharCode.apply(null, new Uint8Array(request.response)));
      // assign base64 encoded image to image source
      myImg.src=  'data:image/jpeg;base64,' + imgBase64;
    }
  }
}

<img id="myImg" />

  

注意：从外部域检索图像时，必须考虑CORS。

---

ES6方法：获取

您可以使用fetch来检索图像，并在收到图像后立即将它们注入DOM中。

let myImage = document.getElementById('myImg');
let url = "https://placekitten.com/200/300";

fetch(url)
.then( response=> {
  // if response is OK, covert it into a blob
  if(response.ok) return response.blob();
  else throw new Error('Response not OK');
})
.then(myBlob=>{  
  // Assign it to the image src using createObjectURL
  myImage.src = URL.createObjectURL(myBlob);
})
.catch(function(error){
  // hadle errors
  console.log(error.message);
});

<img id="myImg" />

您可以在Mozilla开发人员网页上获取有关Fetch和createObjectURL的更多详细信息。

---

先前的代码可以轻松转换为可重用的函数，适用于一般情况。