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

问题描述 投票:0回答:1

简而言之,我想在浏览器中创建一个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 是第三方组件。

javascript html html5-canvas blob browser-api
1个回答
0
投票

您可以尝试逐步将 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);
}
© www.soinside.com 2019 - 2024. All rights reserved.