Question

当访问者到达网站时，我希望淡出背景图像，但是当他们已经在缓存中获得该图像时，我希望淡出。有点像这样：

检查缓存中是否已有背景图像。
如果是，那就显示出来。
如果不是，则将其隐藏，加载时将其淡入。

使用jQuery我可以隐藏它，然后在加载时将其淡入：

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

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

但是如何才能使这个条件化，所以只有在不的图像已经缓存的情况下才会发生？

我在论坛上找到的所有内容都会在图片完成加载时触发。如何才能触发它，因为它没有加载？

感谢您的帮助， Lernz

@Sima基于来自that other thread的代码我已经做到了以下 - 但它似乎没有任何影响。如果你能看到我出错的地方那就太棒了：

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

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

我认为这并不像看起来那么容易，here应该是一个解决方案..

如果没有加载图像，请执行某些操作（jquery）

3 个答案: