我写了一些代码,让用户可以上传一个ZIP文件中的一些图片。在下一个页面上,我需要将所有图像分别显示在一个85*85像素的框架中。
问题是加载所有图片可能需要一些时间。因此,我想在用户等待图片加载时显示一个加载gif。
我将图像的src设置为“加载gif”,同时创建了一些带有真实源ID的复选框。
echo "<td><img src=\"beelden/ajax-loader-black-16.png\" id=\"img".$image."\" style=\" width: 85px; height: 85px; border: 1px solid gray; background-color: #fff; padding: 10px;\">";
echo "<input type=\"checkbox\" id=\"img[".$image."]\" name=\"check_image[]\" value=\"".$filename."\" /></td>";
<input type="hidden" name="aantal" id="aantal" value="<?=$image?>" >
然后我创建了一些JavaScript代码来检查图像是否已加载,当图像已加载时,它应该替换图像的源。
<script>
var aantal = document.getElementById("aantal").value;
for(var i = 0; i < aantal; i++){
var source = document.getElementById("img["+i+"]").value;
var img = new Image();
img.onload = function(){
$("#img"+i).attr('src', source);
}();
img.src = source;
}
</script>
但是它不像我预期的那样工作,我认为只要第一个图片加载完就会对所有图片触发。是否有任何想法我做错了什么或如何修复这个问题?
document.getElementById("img["+i+"]").value;
е’Ң$("#img"+i).
еӨӘд»Өдәәеӣ°жғ‘дәҶгҖӮ - Bellash()
),而img.onload
被赋予了退出值——也就是undefined
。闭合循环变量甚至没有时间成为一个错误。 - Amadan