创建一个浏览器中预加载的模拟实际加载的未加载图片的URL。

Question

简而言之，我想在浏览器中创建一个惰性加载的模拟图片源URL，以便模拟图片加载的过程。以下是期望的工作流程，全部在浏览器内完成：

使用URL.createObjectURL、canvas.toDataURL或其他类似方法创建一个URL，该URL指向尚未加载的实际图片（就像真实场景一样）。
将返回的指向未加载图片的URL传递给HTML 标签。
图片在HTML 标签中不会（明显地）加载。
在延迟一段时间后，通过某种JS函数触发图片（URL所指向的）的加载。
实际图片在HTML 标签中（明显地）显示出来。

我已经成功在浏览器中创建了一个指向图片的src字符串，并将其传递给HTML 标签，但图片会立即加载。

const canvas = document.createElement('canvas');
// ...使用getContext、fillRect等方法创建图片...
const url = canvas.toDataURL('image/png');

如何确保URL所指向的图片最初不被加载？

使用URL.createObjectURL或其他方法是否更好？

这是否可行？

补充说明： 我不想编辑HTML 标签，如使用onload方法，因为该图片是第三方（React）组件。

Kevin B · Answer

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

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

// 绘制一个蓝色矩形
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 200);

// 绘制一个红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(200, 50, 100, 200);

// 将画布转换为data URL
const url = canvas.toDataURL('image/png');

// 现在使用'url'来逐步向 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);
}

Martin Thoma · Answer

随着现代互联网速度的提升，图像通常能在毫秒内完成加载。为了模拟图像加载的过程，一种可能性是“部分”地在我们的canvas上绘制图像。而利用canvas，我们还能添加各种炫酷的动画效果，想象力就是唯一的限制……

以下是使用从左至右动画来模拟图像加载的一个简单示例：

接下来是一个使用模糊效果的简单动画示例：

您可以直接使用canvas作为图像展示，而非使用HTML 标签。但如果您确实想使用标签，则在canvas上绘制完成后，可以通过以下方式设置其源：

var img = document.querySelector('img');
img.src = canvas.toDataURL('image/png');

需要注意的是，使用 toDataURL() 可能会遇到CORS问题：

当您将任何未经CORS批准从其他源加载的数据绘制到canvas时，canvas就会被污染。污染的canvas被视为不安全，试图从canvas检索图像数据会导致异常抛出。

您可进一步阅读关于此问题的详细信息：

MDN Web文档: CORS启用图像与安全和污染canvas

另外，还有一种方法是使用CSS来创建动画。这种方式使得代码与图像解耦，可以轻松应用于多个图像：