等待图像替换,直到图像加载完毕
我有一个工作脚本(感谢 stackexchange!) 用于动态交换图像。我用它作为画廊脚本。它看起来像这样:
$(".source a").click(function(e){
e.preventDefault();
var $a = $(this);
$("#targetcontainer img").hide("puff", function(){
$(this).attr("src", $a.attr("href")).show("fold");
});
});
该脚本的问题是旧图像在 JQ show 命令后闪烁。新的源图像大约一秒钟后就会显示,这会产生奇怪的效果。我怎样才能防止这种情况发生?
I have a working script (thanks stackexchange!) for exchanging an image on the fly. I use it as a gallery script. It looks like this:
$(".source a").click(function(e){
e.preventDefault();
var $a = $(this);
$("#targetcontainer img").hide("puff", function(){
$(this).attr("src", $a.attr("href")).show("fold");
});
});
The problem regarding this script is that the old image flickers after the JQ show command. The new source Image shows up a second or so later which makes a weird effect. how can I prevent this from happening?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(3)
被翻牌2024-11-10 12:28:27
在 JQuery 中,有 load 事件。
1)检索图像。
var image = $("#img");
image.hide();
2)加载时做一些事情。
image.load(function(){
image.show();
});
3)更改 src 属性以在图像更改后触发加载事件。
image.attr("src","image.jpg");
您可以在此处阅读有关它的更多信息: http://api.jquery.com/load-event/< /a>
情深如许2024-11-10 12:28:27
在所有浏览器中以最小的延迟实现此功能的最佳方法是使用 CSS sprites 。
如果这不适合您,您可以在某处预加载图像并使其不可见——浏览器将提前加载图像,并且在 JQuery 执行时不会延迟。
~没有更多了~
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
您可以在尝试显示图像之前预加载图像...
You could preload the image before attempting to display it...