简而言之,我想在浏览器中创建一个lazy-loaded-mock-image-src-url。这是为了模拟图像的加载,看看它是如何加载的。
这就是我希望流程如何工作,全部在浏览器中完成。
我已设法在浏览器中创建一个引用图像的 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 是第三方组件。
您可以尝试逐步将 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);
}