如果图片未加载，使用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();
     }
    });

});

- Learnz

Answer 1

你可以尝试以下方法：

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

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

- karim79

---

不要忘记先使用 .hide() 隐藏它（在 if 语句内）。 :) - user1106925

是的，刚刚编辑完。该死的，这是漫长的一天和一周，期待星期五的到来。 - karim79

这对我不起作用。感谢您提供了.complete的参考 - 我不熟悉它。也许在使用jQuery选择器时它不起作用。我该如何使用纯JavaScript进行选择？ - Learnz

document.getElementById("bkg") - 但我非常确定这不是它无法工作的原因。 - karim79

另外，像 @Sima 指出的那样，请检查这个线程：http：//stackoverflow.com/questions/2446740/post-loading-check-if-an-image-is-in-the-browser-cache。 - karim79

嗯，也许它正在运行，而我只是测试不正确。我将图像更改为我以前没有使用过的图像，它完美地工作了。我一直通过清除缓存并重新加载来进行测试。有没有更好的测试方法？ - Learnz

Answer 2

我觉得这并不像看起来的那么简单，这里应该有一个解决方案。

- simekadam

---

这很棒，但我有点难以理解。我想问一下，是否$("#bkg img")存在于window.localStorage.cachedElements中？让我试一试... - Learnz

好的，我真的不太明白这个。有人还有什么其他的想法吗？ - Learnz

不是的...你应该先检查window.localStorage是否有你的源字符串（根据链接的解决方案），然后如果它没有存储在那里，你应该绑定load事件处理程序与fadeIn代码，否则什么也不做，让它正常显示。 实际上并没有存储图像本身，只有持久化信息，即图像是否在以前加载过（我们假装如果是，则应该在缓存中..） - simekadam

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

- thecodeparadox