Javascript 如何在ES5中为从服务器返回的映像实现延迟加载？

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

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

感谢您的帮助。

ES5方法：XMLHttpRequest 在这种情况下，您将从ajax请求中获得一个

arraybuffer

，它必须转换为

base64

字符串，然后才有用。（IE10+兼容方法）

让myImg=document.getElementById（'myImg'）；
让url=”https://placekitten.com/200/300";
let request=new XMLHttpRequest（）；
request.open（“GET”，url，true）；
request.responseType=“arraybuffer”；
request.send（空）；
request.onreadystatechange=函数（响应）{
if（request.readyState==4）{
如果（request.status==200）{
//将接收到的arrayBuffer转换为base64编码字符串
var imgBase64=btoa（String.fromCharCode.apply（null，新的Uint8Array（request.response））；
//将base64编码图像分配给图像源
src='data:image/jpeg；base64'+imgBase64；
}
}
}

---

如果您已经收到它们，则无需再次加载它们。请添加一个以获得更多帮助。@KoshVery这是一个关于做某事的一般方法的问题。一个例子太复杂了，没有任何用处，而且会逃避问题的全部目的。我相信这个例子比文字更能说明问题。我同意不需要任何例子，描述非常清楚。谢谢。虽然这可能会让我走上正确的道路，但有可能改用ajax吗？我需要支持IE11，并且不希望使用polyfill进行获取。我从未使用过fetch，但它看起来非常类似于ajax。很抱歉，我还没有完全理解您的解决方案，这个答案的延迟加载部分到底是什么？如果我在一次响应中从服务器返回数百个图像的列表，那么您的回答不会有任何帮助，对吗？延迟加载具体在哪里实现？感谢您的帮助此代码允许您仅在需要时加载图像，但您必须逐个加载每个图像，并手动将它们注入DOM。如果您从服务器收到一个图像URL列表，您必须迭代该列表，并为每个元素执行此代码。“此代码允许您仅在需要时加载图像”-这就是我所困惑的，您的ES5代码片段如何知道我们何时需要图像？这个功能到底在哪里？我知道这些类型的解决方案，并且以前已经实现过它们，我遇到的问题是它们不能与base64数据uri一起工作，这正是这个问题的重点，试图弄清楚如何让这些解决方案中的一个与base64数据uri一起工作，或者将Blob从服务器转换为远程图像URL或其他内容