我发现了许多描述 javascript 图像加载的主题,但并不完全是我正在寻找的内容。
我目前正在以正常方式加载 html 中的图像,例如
<img src="images/big-image.jpg">
这会导致网页上有空白区域,从上到下填充有加载图像。此外,我总是必须注意图像的文件大小。
What 我想实现是当页面加载时,显示每个图像的缩小版本(大约 10kb)。当页面完全加载时,应该有一个 JavaScript 函数在后台加载大图像并在加载时替换它们。
我已经找到了一种使用 javascript 执行此操作的方法,但在替换所有图像之前,浏览器显示他处于“正在加载”状态。是否可以使用异步方法在后台完成加载任务?
<img src="small.jpg" id="image">
<script>
<!--
var img = new Image();
img.onload = function() {
change_image();
}
img.src = "small.jpg";
function change_image() {
document.getElementById("image").src = "big.jpg";
}
//-->
</script>
你试过这个吗?
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.css');
xhr.send('');
// preload image
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)