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

Question

On one page, I'm trying to lazy load potentially hundreds of images that are returned from my server as blobs. I've tried converting them to base64 data uris then using some lazy loading techniques, but understandably that didn't work, since the data uri is already in the html, which means the browser still needs to load the image data even if it's not going to display it right away.

Is there some way to lazy load dynamic images returned by a server as blobs? Or some way to convert them to use remote image urls then use typical lazy loading that way?

Thanks for any help.

Answer 1

ES5 approach : XMLHttpRequest

In this scenario you get an arraybuffer from the ajax request, that must be converted into a base64 string, before being useful. (IE10+ Compatible Method)

 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" /> 

Note: CORS must be taken in consideration, when retrieving images from external domains.

---

ES6 approach : Fetch

You can use fetch to retrieve your images, and inject them in the DOM as soon as you receive them...

 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" /> 

You can get more details about Fetch and createObjectURL in the Mozilla Developer webpage.

---

Previous code can be easily converted into reusable functions, suitable for generic scenarios.