加载完成后才淡入背景图片

Question

我尝试加载一个大图片背景...即使使用了.load，图像只是正常加载，没有平滑的淡入效果。以下是我的代码。

$(function(){
    var bgimage = new Image();      
    bgimage.src="http://placeimg.com/760/460/tech";       

    $(bgimage).load(function(){
        $(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(slow);                  
    });
});

示例： http://jsfiddle.net/nud2bfb1/

我做错了什么？

- Debajyoti Das

Answer 1

尝试这个：你需要先隐藏图片，然后使用 fadeIn()，还有 fadeIn(slow) 必须是 fadeIn("slow")，即慢速时要加上引号。

$(function(){
    var bgimage = new Image();      
    bgimage.src="http://placeimg.com/760/460/tech";       
    $(".feature").hide();     
    $(bgimage).load(function(){
        $(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000); 
     }); 
});

DEMO

- Bhushan Kawadkar

---

由于.hide，出现了闪烁的情况，有什么方法可以解决吗？ - Debajyoti Das

你可以在加载前隐藏 $(".feature") 并使用毫秒级别的 fadeIn，参见 http://jsfiddle.net/nud2bfb1/4/ - Bhushan Kawadkar

不，你正在.feature中淡出，图像在其中正常加载...将您的互联网速度放慢以查看。我希望图像在完全加载后淡入。 - Debajyoti Das

如何避免在淡入图像时，该图像会暂时覆盖文本的情况，请参考以下链接：http://jsfiddle.net/nud2bfb1/13/ - Debajyoti Das

.load is deprecated since version 1.8, but it works equally well with .on('load', function() { }) - kumaheiyama

Answer 2

您无法检测背景图像的加载。您无法过渡/动画化背景图像。

您和其他答案尝试的是在加载img元素后淡出/动画化整个div。然而，这种方法并不总是完美地运行。因为，在此过程中，要么必须将整个div（连同其内容）保持隐藏，直到图像加载完成；要么就需要先隐藏div，再尝试淡入。这会导致div在淡出之前突然被隐藏，从而产生闪烁效果。

我建议您使用一个虚拟的img元素（如您已经在做的），但将其与div相对定位，并设置相同的大小和负的z-index。这样，在加载图像时，div及其内容可以仍然可见。一旦图像加载完成，您就可以淡入虚拟img元素（位于div后面），然后设置background-image并移除虚拟img元素。

演示：http://jsfiddle.net/abhitalks/q7cvn2nd/ 查看此片段：

var $img = $("<img />");

$img.load(function() {
    $(this).fadeIn("slow", function() {
        $('.feature').css('background-image', 'url(http://lorempixel.com/240/240)');
        $(this).remove(); 
    });   
});

$img.addClass("dummy");
$img.attr('src', 'http://lorempixel.com/240/240');
$(".feature").append($img);

* {
    box-sizing: border-box;
}
.feature {
    position: relative;
    width: 240px; height: 240px;
    border: 1px solid gray;
    padding: 8px; color: #f00; 
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
img.dummy {
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%; height: 100%;
    position: absolute;
    z-index: -1;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature"><h1>This is some text.</h1></div>

重要提示：不要忘记删除虚拟图片。

- Abhitalks

Answer 3

默认情况下会显示您的图像。在淡入之前隐藏它：

<div class="feature" style="display:none;"></div>

FIDDLE : http://jsfiddle.net/nud2bfb1/3/

FIDDLE：http://jsfiddle.net/nud2bfb1/3/

- ylerjen

Answer 4

$(function(){
    var bgimage = new Image();      
    bgimage.src="http://placeimg.com/760/460/tech";       

    $(bgimage).load(function(){
        $(".feature").css("background-image","url("+$(this).attr("src")+")").not(':visible').fadeIn("slow");               
    });
});

演示

- Dimag Kharab

---

不，你正在.feature中淡出，图像在其中正常加载...将你的互联网速度放慢以查看。 - Debajyoti Das

这就是你正在做的，淡化.feature文件！ - Dimag Kharab

如果我做错了，请纠正... 我希望图像在完全加载后淡入，而不是.feature。 - Debajyoti Das