gpt4 book ai didi

javascript - HTML,如何并行设置图像的多个src属性,最快获胜

转载 作者:行者123 更新时间:2023-12-03 03:18:03 24 4
gpt4 key购买 nike

我想异步下载图像,因此第一个用户看到的是低分辨率图像,并且在后台下载更高分辨率的版本。我已经尝试过以下方法。

<html>
<head>
<script>
window.addEventListener('load', function () {
var kuvaEl = document.getElementById('kuva');

var r_src = kuvaEl.getAttribute('r-src');
var a_src = kuvaEl.getAttribute('a-src');

kuvaEl.setAttribute('src', r_src);
kuvaEl.setAttribute('src', a_src);
});
</script>
</head>
<body>
<img id="kuva" src="http://www.viikonloppu.com/wp-content/uploads/2014/04/lotoflaughters.com_-619x428.jpg?c3bc1b"
a-src="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg"
r-src="http://fuzyll.com/images/2016/angel_oak_panorama.jpg" />
</body>
</html>

但问题是当src第二次更改时r_src下载被中止。我想并行下载这两个图像,并首先显示 r_src (仅当它下载速度比 a_src 快时),当 *a_src * 准备就绪时,显示a_src

此外,是否可以在 src 实际更改之前将这些 a_srcr_src 图像下载到浏览器缓存?理想情况下,我希望将 src 更改为从缓存中检索图像或加入该网址的待下载。

我还可以使用 jQuery。 IE7必须支持实现。

最佳答案

您只需要使用 javascript 或 jquery 并加载同一图像的两个版本。第一个是低分辨率,但您将在隐藏的 img 标签内下载高分辨率。

下载完成后,您只需隐藏/删除低分辨率图像并显示高分辨率即可。

此链接显示了一些测试和一些方法。并且应该支持ie7 Load a low-res background image first, then a high-res one

关于javascript - HTML,如何并行设置图像的多个src属性,最快获胜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46682786/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com