Làm mờ trong hình nền Chỉ sau khi tải hoàn toàn

Question

Tôi đang cố gắng tải một nền hình ảnh lớn ... Mặc dù tôi đang sử dụng .load hình ảnh chỉ tải bình thường và không bị mờ mịn Sau khi tải. Đây là mã của tôi.

$(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);     
    }); 
}); 

Demo: http://jsfiddle.net/nud2bfb1/

Tôi đang làm gì sai?

Answer 1

Hãy thử điều này: Bạn cần phải che giấu hình ảnh đầu tiên và sau đó sử dụng fadeIn(), cũng fadeIn(slow) phải fadeIn("slow") tức là chậm trong dấu ngoặc kép

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

Answer 2

Hình ảnh của bạn được hiển thị theo mặc định. Giấu nó trước khi mờ dần nó trong:

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

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

Answer 3

$(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");    
    }); 
}); 

demo

Answer 4

Bạn không thể phát hiện tải trên ảnh nền. Bạn không thể chuyển đổi/tạo ảnh động nền.

Những gì bạn và các câu trả lời khác đang cố gắng thực hiện là làm mờ/animate toàn bộ div sau khi tải phần tử img. Điều này không làm việc mọi lúc hoàn hảo. Bởi vì, IMO này gây rối vì toàn bộ div (cùng với nội dung của nó) phải được giữ ẩn trong khi hình ảnh đang tải hoặc bạn ẩn div và sau đó cố gắng làm mờ nó. Điều này sẽ cho bạn nhấp nháy khi div bị ẩn đột ngột trước khi mờ dần.

Điều tôi đề nghị là bạn sử dụng phần tử giả img như bạn đã làm, nhưng đặt nó tuyệt đối (liên quan đến div) với cùng kích thước và tiêu cực z-index. Bằng cách này, các div và nội dung của nó có thể được nhìn thấy trong khi hình ảnh đang tải. Sau khi tải, bạn phai mờ hình img ở phía sau (sau số div), sau đó gán background-image và sau đó xóa hình giả img.

Demo: http://jsfiddle.net/abhitalks/q7cvn2nd/

Xem đoạn này:

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>

quan trọng: Đừng quên xóa hình ảnh giả.