Question

我遇到了缓存问题，因为当页面首次加载时，清除缓存时第一次加载时不会显示图像。我正在与提供图像的外部媒体公司合作。我在回调函数中编写了下面的代码，以便在加载后替换图像源。

我这样做是对的吗？

$('img').each(function(){

    var img = $(this);

    // AJAX HEAD request to check the larger image file has loaded 
    var img_src_large = img.attr("src").replace("/viewfinder.jpg", "_SMALL.jpg");

    $.ajax({
        url: img_src_large,
        type:'HEAD',
        error:
            function(){
                img.fadeIn("fast");
            },
        success:
            function(){
                img.attr("src",img_src_large).fadeIn("fast");
            }
    });

});

Answer 1

您可以通过强制触发由于缓存而已加载的图像上的“加载”事件来实现此目的。您可以用您想要的逻辑替换fadeIn部分。

$('img').hide().one("load",function(){
    $(this).fadeIn(500);
}).each(function(){
    if(this.complete) $(this).trigger("load");
});

Answer 2

我用img加载解决了这个问题，也许这会帮助处于相同情况的人。

// Wrap Thumb Views
$('#rfxViews img').each(function(){

    var img = $(this); // cache selected to variable

    // Replace the small swatch images
    var img_src_large = img.attr("src").replace("/viewfinder.jpg", "_SMALL.jpg");

    // Set empty source until image has loaded below
    img.attr("src","");

    img.attr('src', img_src_large).hide().load(function(){
       $(this).show()
    })

});

在第一次加载时替换图像时的缓存问题

2 个答案: