在我的专辑幻灯片页面上，我有类似的代码
<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 上试试
每次要加载图片时使用一个新的图像对象：
var image = new Image();
image.onload = function () {
document.getElementById('id1').setAttribute('src', this.src);
};
image.src = 'http://path/to/image';
<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
你可以试试这个：
<img id="id1" src="url/to/file.png" onload="showImage()">
function showImage() {
$('#id1').attr('src', 'new/file/link.png');
}
此外，尝试删除~服务器端（例如 ASP.NET）所需的运算符，这只是 JS 中不需要的运算符。
这样，您可以更改图像的属性。
这是小提琴：http: //jsfiddle.net/afzaal_ahmad_zeeshan/8H4MC/
请参阅本教程：使用本机 JavaScript 加载图像和处理显示加载微调器的事件
它告诉您如何使用原生 JavaScript 加载图像以及如何处理显示加载微调器的事件。基本上，您创建一个新的 Image(); 然后正确处理事件。这应该适用于所有浏览器，即使在 IE7 中（甚至可能低于 IE7，但我没有测试...）
试试这个。你有一些符号$imageUrl
<img id="id1" src="$imageUrl" onload="javascript:showImage();">
最简单的从 JS 加载图像到 DOM 元素：
element.innerHTML += "<img src='image.jpg'></img>";
使用 onload 事件：
element.innerHTML += "<img src='image.jpg' onload='javascript:showImage();'></img>";
不过这对我有用……我想在单击铅笔图标后显示图像……我希望它无缝……这就是我的方法……
我创建了一个 input[file] 元素并将其隐藏，
<input type="file" id="upl" style="display:none"/>
此输入文件的点击事件将由 getImage 函数触发。
<a href="javascript:;" onclick="getImage()"/>
<img src="/assets/pen.png"/>
</a>
<script>
function getImage(){
$('#upl').click();
}
</script>
这是在侦听 ID 为 #upl 的输入文件元素的更改事件时完成的。
$(document).ready(function(){
$('#upl').bind('change', function(evt){
var preview = $('#logodiv').find('img');
var file = evt.target.files[0];
var reader = new FileReader();
reader.onloadend = function () {
$('#logodiv > img')
.prop('src',reader.result) //set the scr prop.
.prop('width', 216); //set the width of the image
.prop('height',200); //set the height of the image
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
});
})和繁荣！- 有用....
只需单击图像，就会改变：
<div>
<img src="https://i.imgur.com/jgyJ7Oj.png" id="imgLoad">
</div>
<script type='text/javascript'>
var img = document.getElementById('imgLoad');
img.onclick = function() { img.src = "https://i.imgur.com/PqpOLwp.png"; }
</script>