Làm điều gì đó nếu hình ảnh không được tải (jquery)

Question

Tôi đang tìm cách mờ dần trong hình nền khi khách truy cập đến trang web nhưng không phải khi họ đã có hình ảnh đó trong bộ nhớ cache của họ. Một cái gì đó dọc theo dòng này:

1. Kiểm tra xem hình nền đã có trong bộ nhớ cache chưa.
2. Nếu sau đó hiển thị nó.
3. Nếu nó không phải là sau đó giấu nó và khi nó tải, mờ dần nó trong

Sử dụng jQuery tôi có thể giấu nó và sau đó mờ dần nó trong khi nó tải:.

$("#bkg img").hide(); 

$('#bkg img').load(function() { 
$(this).fadeIn(); 
}); 

Nhưng làm thế nào sao tôi làm điều này có điều kiện nên nó chỉ xảy ra nếu hình ảnh không phải là đã được lưu trong bộ nhớ cache?

Mọi thứ tôi đã tìm thấy trên diễn đàn sẽ kích hoạt khi hình ảnh tải xong. Làm thế nào tôi có thể làm cho nó kích hoạt vì nó không được tải?

Nhờ sự giúp đỡ, Lernz

@Sima Dựa trên mã từ that other thread Tôi đã thực hiện nó như xa như sau - nhưng nó dường như không được có bất kỳ tác dụng. Nếu bạn có thể nhìn thấy nơi tôi đang đi sai rằng sẽ thật tuyệt:

var storage = window.localStorage; 
if (!storage.cachedElements) { 
storage.cachedElements = ""; 
} 

function logCache(source) { 
if (storage.cachedElements.indexOf(source, 0) < 0) { 
    if (storage.cachedElements != "") 
    storage.cachedElements += ";"; 
     storage.cachedElements += source; 
    } 
} 

function cached(source) { 
    return (storage.cachedElements.indexOf(source, 0) >= 0); 
} 

var plImages; 

//On DOM Ready 
$(document).ready(function() { 
    plImages = $("#fundo-1 img"); 

    //log cached images 
    plImages.bind('load', function() { 
     logCache($(this).attr("src")); 
    }); 

    //display cached images 

    plImages.each(function() { 
    var source = $(this).attr("src") 
    if (!cached(source)) { 
     $(this).hide().fadeIn(); 
    } 
    }); 

}); 

Answer 1

Bạn có thể thử:

if(!$('#bkg img')[0].complete) { 
    $('#bkg img').hide().load(function() { 
     $(this).fadeIn(); 
    }); 
} 

https://developer.mozilla.org/en/DOM/HTMLImageElement

Answer 2

$("#bkg img").hide();  
var imgCount=$("#bkg img").length; 
$('#bkg img').load(function(){ 
    if(!--imgCount){ 
     $('#bkg img').fadeIn(); 
      // your code after load 
    } else { 
     // your code onloading time 
    } 
}); 

Answer 3

Tôi nghĩ rằng không phải là dễ dàng vì có vẻ như, here phải là giải pháp ..