预加载图像并在加载时显示微调器 [英] preload image and show a spinner while loading
本文介绍了预加载图像并在加载时显示微调器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
Hy,
我使用uploadify上传一些图片,在我显示列表中的所有图像后,当我点击图像拇指时,它是一个更大的图像使用此功能在div中打开
i use uploadify to upload some images, after i display all the images thumbs in a list, when i click on a image thumb a bigger image it's open in a div with this function
$(".thumbs li a").click(function(){
var largePath = $(this).attr("href");
$('.thumbs li').removeClass('thumbac');
$(this).parent().addClass('thumbac');
$("#largeImg").attr({ src: largePath });
return false;
});
这是我的照片列表:
<div class="upimage">
<ul id="upimagesQueue" class="thumbs">
<li id="liupimages">
<a href="uploads/0001.jpg"><img src="uploads/0001.jpg" alt="0001.jpg" id=""></a>
</li>
<li id="liupimages">
<a href="uploads/0002.jpg"><img src="uploads/0002.jpg" alt="0002.jpg" id=""></a>
</li>
<li id="liupimages">
<a href="uploads/0003.jpg"><img src="uploads/0003.jpg" alt="0003.jpg" id=""></a>
</li>
<script>
$(".thumbs li a").click(function(){
var largePath = $(this).attr("href");
$('.thumbs li').removeClass('thumbac');
$(this).parent().addClass('thumbac');
$("#largeImg").attr({ src: largePath });
return false;
});
</script>
</ul>
</div>
这是图像出现的div
this is the div where the images appear
<div class="largeImg" >
<img id="largeImg" src="" />
</div>
如何在显示之前预先加载图像?
how i can preload the image before it display?
推荐答案
您可以通过某种方式利用 加载
事件,例如:
You can somehow harness the load
event, e.g.:
$(".thumbs li a").click(function(){
var largePath = $(this).attr("href");
$('.thumbs li').removeClass('thumbac');
$(this).parent().addClass('thumbac');
$("#largeImg").hide()
.attr({ src: largePath })
.load(function() {
$(this).show();
});
return false;
});
这篇关于预加载图像并在加载时显示微调器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文