在浏览器中创建卸载模拟图像的 URL 以模拟实际加载

Question

简而言之，我想在浏览器中创建一个lazy-loaded-mock-image-src-url。这是为了模拟图像的加载，看看它是如何加载的。

这就是我希望流程如何工作，全部在浏览器中完成。

1. 使用 URL.createObjectURL、canvas.toDataURL 或类似方法创建 URL，其中返回的 url 引用的实际图像尚未加载（就像真实场景一样）。
2. 将返回的引用已卸载图像的 url 传递给 html-img-tag。
3. 图像未（明显）加载到 html-img-tag 中。
4. 延迟一段时间后触发图像（url 引用的）的加载（最好使用一些 JS 函数）。
5. 实际图像（明显）显示在 html-img-tag 中。

---

我已设法在浏览器中创建一个引用图像的 src 字符串，该字符串被传递到 html-img-tag，但图像会立即加载。

const canvas = document.createElement('canvas');
// ...create the image using getContext, fillRect etc...
const url = canvas.toDataURL('image/png');

如何确保 url 引用的图像最初未加载？

是用

URL.createObjectURL

还是其他方法更好？

有可能吗？

---

PS。我不想使用 onload 方法编辑 html-img-tag，因为 img 是第三方组件。

Answer 1

您可以尝试逐步将 url 数据块传递给 img 标签 src 属性。

const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext('2d');

// Draw a blue rectangle
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 200);

// Draw a red rectangle
ctx.fillStyle = 'red';
ctx.fillRect(200, 50, 100, 200);


// Convert the canvas to a data URL
const url = canvas.toDataURL('image/png');


// Now use 'url' to progresively pass chunck of data
// to img.src

let inter = null;
let counter = 4;

function slowlyLoadImg(img, segment, time) {
    counter = 4;
    inter = setInterval(() => {
    img.src = url.slice(0, url.length / counter);
    counter -= segment;
    if(counter < 0){
        img.src = url;
         clearInterval(inter);
    }
}, time);
}

window.onload = function() {
    const img = document.querySelector('img');
    slowlyLoadImg(img, 1, 800);
}