等待图像替换,直到图像加载完毕

发布于 11-03 12:28 字数 461 浏览 3 评论 0原文

我有一个工作脚本(感谢 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

因为看清所以看轻2024-11-10 12:28:27

您可以在尝试显示图像之前预加载图像...

$(".source a").click(function(e) {
    e.preventDefault();

    var newSrc = this.href,
        image = new Image();    

    image.onload = function() {
        $("#targetcontainer img").hide("puff", function() {
            $(this).attr("src", newSrc).show("fold");
        });
    }
    image.src = newSrc;
});

You could preload the image before attempting to display it...

$(".source a").click(function(e) {
    e.preventDefault();

    var newSrc = this.href,
        image = new Image();    

    image.onload = function() {
        $("#targetcontainer img").hide("puff", function() {
            $(this).attr("src", newSrc).show("fold");
        });
    }
    image.src = newSrc;
});
被翻牌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>

In JQuery there is load event.

1) Retrieve image.

var image = $("#img");
image.hide();

2) On load do something.

image.load(function(){
 image.show();
});

3) Change src attribute to fire load event after image has changed.

image.attr("src","image.jpg");

You can read more about it in here: http://api.jquery.com/load-event/

情深如许2024-11-10 12:28:27

在所有浏览器中以最小的延迟实现此功能的最佳方法是使用 CSS sprites

如果这不适合您,您可以在某处预加载图像并使其不可见——浏览器将提前加载图像,并且在 JQuery 执行时不会延迟。

The best way to make this work in all browsers with the minimal amount of delay is to use CSS sprites.

If that's not an option for you, you could pre-load the image somewhere and make it invisible -- the browser will load the image early, and won't delay when your JQuery exectues.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文