jQuery延迟直到加载背景图像，然后淡入？答案

【问题标题】：jQuery delay until background image is loaded, then faded in?jQuery延迟直到加载背景图像，然后淡入？
【发布时间】：2011-03-06 10:45:56
【问题描述】：

我一直在做大量的研究，并且有大量的插件和教程涵盖了大型背景图像的使用。不幸的是，它们都有一个共同点——它们使用绝对定位的图像来表现“假”背景图像。

通常这对我来说很好，我之前也这样做过，但是，这个项目有一个重复的背景图像，所以我有必要使用普通的 CSS 规则来声明背景图像。

说了这么多，有没有办法检查图像是否已加载并告诉 jQuery 在加载后淡入此背景图像？我正在寻找的主要内容是 jQuery 验证图像是否实际加载的方法。如果没有，那么我想我需要接受一个简单的静态延迟（不幸的是，这会破坏连接速度慢的用户的效果）。

最后一件事 - 这可以通过 CSS 类切换/切换来完成，以便我可以在加载图像之前和之后更改 body 类吗？对于没有 javascript 的用户来说，这将是一个后备方案，这样我就不必在加载背景图像时 .hide() 我的整个身体。

*编辑：这个帖子似乎有类似的讨论，但我不认为这是完全相同的事情：How do I delay html text from appearing until background image sprite is loaded? *

* 编辑 2 *

看起来上面的线程毕竟工作了，除了我仍然缺少淡入淡出效果。我故意将 fadeIn 设置得很高，但由于某种原因它没有动画，有什么想法吗？

<script>

$(function() {
      // create a dummy image
    var img = new Image();

      // give it a single load handler
    $(img).one('load',function() {
        $('html').css('background','url(<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads
    });

      // declare background image source
    img.src = "<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg";

      // make sure if fires in case it was cached
    if( img.complete )
        $(img).load();
});

</script>

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

这似乎是一个旧线程，但我找到了解决方案。希望对您有所帮助：

$(window).load(function(){
    $('<img/>').attr('src', 'images/imgsrc.png').load(function() {
        $('#loading').fadeOut(500);     
    $('#wrapper').fadeIn(200);
});
});

【讨论】：

【解决方案2】：

使用 $(document).load() 来实现你想要的。

“我故意将 fadeIn 设置得很高，但由于某种原因它没有动画，有什么想法吗？”

就在页面加载之前

【讨论】：

知道如何通过切换 body 类来实现效果吗？我希望它能够优雅地降级（例如，对于禁用 javascript 的用户，不会切换 body 的类）

【解决方案3】：

将display: none; 添加到您的正文标签

<body style="display: none">

然后用 jQuery 修改你的代码，使它看起来像这样：

$(img).load(function(){
  $("body").show();
});

现在页面内容只会在 img 加载完成后显示。

【讨论】：

这很好，但我想通过类切换来做到这一点，这样我就不会搞砸没有启用 javascript 的人。
我不明白..您已经在上面的问题中使用了 javaScript。 jQuery 是 javaScript。

【解决方案4】：

要检查图像何时加载，请声明另一个具有相同src 的“常规”图像（即<img> 标签）并将事件处理程序附加到它。浏览器不会两次加载相同的图像，因此该事件也意味着背景已加载。

我可以提出的另一个技巧是回到“假”背景。为了使它成为“平铺”，您可以创建一个iframe，拉伸以覆盖整个身体，并将该图像作为背景，然后根据需要淡化该 iframe，而页面的其余部分仍安全地保留在“主”框架。

【讨论】：