Question

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

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

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

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

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

*编辑2 *

看起来上面的线程毕竟有效，除了我还缺少fadeIn效果。我故意将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>

Answer 1

这似乎是一个老线程，但我找到了解决方案。希望它可以提供帮助：

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

Answer 2

使用$（document）.load（）来实现你想要的。

“我故意将fadeIn设置为高，并且由于某种原因它不是动画，任何想法为什么？”

就在页面加载之前

Answer 3

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

<body style="display: none">

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

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

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

Answer 4

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

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

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

4 个答案: