在我的专辑幻灯片页面上，我有类似的代码
<span style="display:none;">
<img id="id1" src="~$imageUrl`" onload="javascript:showImage();">
</span>
<span>
// show loader.
</span>
在 中showImage()，我确定图像已加载，因此我显示图像并隐藏加载器。
现在，当用户单击下一步时，我需要更改图像的 src。现在我不需要知道如何仅在加载图像时设置 src。
您可以附加另一个隐藏img元素并在onload事件中交换它们。
或者使用单个图像元素并使用 javascript，如：
var _img = document.getElementById('id1');
var newImg = new Image;
newImg.onload = function() {
_img.src = this.src;
}
newImg.src = 'http://whatever';
此代码应预加载图像并在准备好时显示
对不起大家。
您不能依赖图像加载事件来触发，但您可以在某些情况下依赖它并回退到允许的最大加载时间。在这种情况下，10 秒。我写了这个，它存在于生产代码中，当人们想要链接表单帖子上的图像时。
function loadImg(options, callback) {
var seconds = 0,
maxSeconds = 10,
complete = false,
done = false;
if (options.maxSeconds) {
maxSeconds = options.maxSeconds;
}
function tryImage() {
if (done) { return; }
if (seconds >= maxSeconds) {
callback({ err: 'timeout' });
done = true;
return;
}
if (complete && img.complete) {
if (img.width && img.height) {
callback({ img: img });
done = true;
return;
}
callback({ err: '404' });
done = true;
return;
} else if (img.complete) {
complete = true;
}
seconds++;
callback.tryImage = setTimeout(tryImage, 1000);
}
var img = new Image();
img.onload = tryImage();
img.src = options.src;
tryImage();
}
像这样使用：
loadImage({ src : 'http://somewebsite.com/image.png', maxSeconds : 10 }, function(status) {
if(status.err) {
// handle error
return;
}
// you got the img within status.img
});
在 JSFiddle.net 上试试
<span>
<img id="my_image" src="#" />
</span>
<span class="spanloader">
<span>set Loading Image Image</span>
</span>
<input type="button" id="btnnext" value="Next" />
<script type="text/javascript">
$('#btnnext').click(function () {
$(".spanloader").hide();
$("#my_image").attr("src", "1.jpg");
});
</script>
如果您通过 AJAX 加载图像，您可以使用回调来检查图像是否已加载并进行隐藏和 src 属性分配。像这样的东西：
$.ajax({
url: [image source],
success: function() {
// Do the hiding here and the attribute setting
}
});
有关更多阅读，请参阅此JQuery AJAX
每次要加载图片时使用一个新的图像对象：
var image = new Image();
image.onload = function () {
document.getElementById('id1').setAttribute('src', this.src);
};
image.src = 'http://path/to/image';