jQuery延迟，直到背景图像加载，然后淡入？ [英] jQuery delay until background image is loaded, then faded in?

问题描述

我已经做了很多研究，有很多插件和教程，涵盖了大背景图像的使用。不幸的是，他们都有一个共同点 - 他们使用绝对定位的图像，表现为假的背景图像。

通常这将对我很好，我但是，这个项目有一个重复的背景图片，所以我有必要使用正常的CSS规则来声明背景图片。

有没有办法检查图像是否加载和告诉jQuery淡入淡出这个背景图像一旦它被加载？我正在寻找的主要事情是一种方式jQuery验证图像实际加载。如果没有，那么我想我需要解决一个简单的静态延迟（不幸的是，它会损坏连接速度慢的用户的效果）。

最后一件事 - 这可以通过CSS类切换/切换，以便我可以在图像加载之前和之后更改主体类吗？这将是一个后备用户没有javascript和将使它所以我不需要 .hide（）我的整个身体，而背景图像加载。

* 编辑：这个线程似乎有类似的讨论，但我不认为这是完全一样的事情：如何延迟html文本显示，直到加载背景图片sprite？ a> *

$ b

* EDIT 2 * 上面的线程工作了，除了我仍然缺少fadeIn效果。我设置的fadeIn故意高，它不是动画的某种原因，任何想法为什么？

 < script& 
 
 $（function（）{
 //创建一个虚拟映像
 var img = new Image（）; 
 
 //加载处理程序
 $（img）.one（'load'，function（）{
 $（'html'）。css（'background'，'url（<？php bloginfo（'template_url' ）; f> in（12000）; //当图像加载
时，淡入元素）; 
 
 // declare background image source 
 img.src =<？php bloginfo（'template_url'）;？> /images/red_curtain.jpg; 
 
 //确保if如果它被缓存，则发生火灾
 if（img.complete）
 $（img）.load（）; 
}）; 
 
< / script> 
  

解决方案

这似乎是一个老线程，这个。
希望它可以帮助：

  $（window）.load（function（）{
 $ ''）。attr（'src'，'images / imgsrc.png'）。load（function（）{
 $（'＃loading'）。fadeOut（500）; 
 $（'＃wrapper'）。fadeIn（200）; 
}）; 
}）; 
  

I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in common - they use absolutely positioned images to behave as "fake" background images.

Normally that would work fine for me and I've done that before, however, this project has a repeating background image, so it's necessary that I use normal CSS rules to declare the background image.

All of that being said, is there a way to check to see if the image is loaded and tell jQuery to fade this background image in once it is loaded? The main thing I'm looking for is a way for jQuery to verify that the image is actually loaded. If not, then I suppose I need to settle for a simple static delay (which unfortunately ruins the effect for users who have slow connections).

Last thing - can this be done via CSS class switching/toggling so that I can change the body class before and after the image is loaded? This would be a fallback for users without javascript and would make it so I don't have to .hide() my entire body while the background image loads.

*EDIT: This thread seems to have a similar discussion but I don't think it's quite the same thing: How do I delay html text from appearing until background image sprite is loaded? *

* EDIT 2 *

Looks like the above thread worked after all, except I'm still missing the fadeIn effect. I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?

<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>

解决方案

This seems an old thread but I found a solution for this. Hope it can help:

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

这篇关于jQuery延迟，直到背景图像加载，然后淡入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！