Сделайте что-нибудь, если изображение не загружено (jquery)

Question

Я думаю, что фоновое изображение исчезает, когда посетитель прибывает на сайт, но не тогда, когда у него уже есть это изображение в кеше.Что-то вроде этого:

1. Проверьте, уже есть ли фоновое изображение в кеше.
2. Если оно есть, покажите его.
3. Если оно не 'затем скрыть его, а когда он загрузится, добавить его.

Используя jQuery, я могу скрыть его, а затем добавить его при загрузке:

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

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

Но как мне это сделать?сделать это условным, чтобы это происходило только в том случае, если изображение не уже кэшировано?

Все, что я нашел на форумах, срабатывает, когда изображение завершает загрузку.Как я могу заставить его срабатывать, потому что он не загружен?

Спасибо за любую помощь, Lernz

@ Sima На основе кода из этого другого потока У меня естьсделал это, насколько это возможно, но это, похоже, не имеет никакого эффекта.Если вы видите, где я иду не так, это было бы замечательно:

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

Вы можете попробовать:

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

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

Answer 2

Я думаю, что это не так просто, как кажется, здесь должно быть решением ..

Answer 3

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