Jquery img 预加载在 FireFox 中不起作用

发布于 2024-09-24 10:20:01 字数 524 浏览 5 评论 0原文

我最近做了一个小的 jQuery 片段，它允许我显示加载图像，直到加载真实图像。

该代码片段似乎适用于 Safari、Chrome，但不适用于 FireFox。

FireFox 仅显示加载 alt，从不切换到加载的图像。

这是片段

var loading = $('<img src="/media/ajax-loader.gif" alt="loading" />');
    $('.thumbnail').each(function(){
        var loadIMG = loading.clone();
            $(this).after(loadIMG).load(function(){
                $(this).fadeIn('fast');
                loadIMG.hide();
        }).hide();
    });

有什么想法吗？

原文

I recently did a small jQuery snippet that allows me to show a loading img until the real image is loaded.

The snippet seems to work in Safari, Chrome but not FireFox.

FireFox only displays a loading alt and never switches to the loaded image.

Here is the snippet

var loading = $('<img src="/media/ajax-loader.gif" alt="loading" />');
    $('.thumbnail').each(function(){
        var loadIMG = loading.clone();
            $(this).after(loadIMG).load(function(){
                $(this).fadeIn('fast');
                loadIMG.hide();
        }).hide();
    });

Any ideas why?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

錯遇了你 2024-10-01 10:20:01

你还没有说 FF 到底发生了什么，但下面可能是问题之一。来自 jquery 文档

有可能是load事件
如果图像是，则不会被触发
从浏览器缓存加载。到
考虑到这种可能性，我们可以
使用触发的特殊加载事件
如果图像准备就绪，请立即进行。
event.special.load 当前为
可作为插件使用。

这是插件的链接。

编辑：

根据加载事件的评论，请尝试以下操作：

$('.thumbnail').each(function(){
        var loadIMG = loading.clone();
            $(this).after(loadIMG).load(function(){
                $(this).fadeIn('fast');
                loadIMG.hide();
        }).hide();
        if (this.complete) $(this).trigger("load");
});

当然，该插件似乎在处理其他一些场景的同时也在做同样的事情。

You haven't said what exactly is happing on FF but below can be one of the problem. From jquery documentation

It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.

Here's the link for plugin.

Edit:

Based on comments from load event, try below:

$('.thumbnail').each(function(){
        var loadIMG = loading.clone();
            $(this).after(loadIMG).load(function(){
                $(this).fadeIn('fast');
                loadIMG.hide();
        }).hide();
        if (this.complete) $(this).trigger("load");
});

Of course, the plug-in seems to be doing same thing along with handling some other scenarios as well as.

回复收藏 0 原文

~没有更多了~