Javascript jQuery图像交换未立即显示

我正在使用下面的jQuery代码替换部分图像src。基本上，它将example.com/200x200/sample.jpg转换为example.com/500x500/sample.jpg

它工作得很好，唯一的问题是它先渲染旧图像，然后再显示新图像。是否可以先加载交换的映像以改善用户体验

$(document).ready(function() {
    $(".gallery img").each(function() {
        $(this).attr("src", function(a, b) {
            return b.replace("200x200", "500x500")
        })
    })
});

---

（多次单击“运行”）

将图像放置在固定位置div中，该位置具有隐藏的溢出，高度和宽度为0。这将导致图像加载但不显示。这是一把小提琴，展示了它的基本思想：。此图像在10秒后显示。使用chrome来控制网络，您将看到它在显示时已加载。这是我使用的代码。您只需要html和css html

javascript

$(document).ready(function() {
  setTimeout(function() {
    $('#image-hider').css('height','500px');
    $('#image-hider').css('width','500px');
  }, 10000);
});

---

这应该可以解决您的问题，（连续多次点击运行，以测试它，或者查看代码段下方的fiddle）

片段：

$（文档）.ready（函数（）{
函数预加载（newImage）{
$（newImage）.each（函数（）{
（新图像（））.src=this；
});
}
预载([
“//lorempixel.com/500/500”
]);
$（“.gallery img”）。每个（函数（）{
$（this.attr（“src”），函数（a，b）{
返回b.替换（“200/200”、“500/500”）；
});
});
});
尝试使用覆盖div

<div class="gallery">
    <img src="//lorempixel.com/200/200" />
    <div class="overlaydiv"> </div>
</div>

查看此
您的小提琴的可能副本对我来说很好，OP可以更改图像URL，问题是页面正在加载原始图像（200x200），然后加载500x500图像。@dippas是的，代码确实有效，但如果您尝试多次按“运行”。您会注意到，旧图像首先显示在新图像之前。我想知道是否可以先加载新的图像以获得更好的用户体验。@neverer是的。
$(document).ready(function() {
  setTimeout(function() {
    $('#image-hider').css('height','500px');
    $('#image-hider').css('width','500px');
  }, 10000);
});

<div class="gallery">
    <img src="//lorempixel.com/200/200" />
    <div class="overlaydiv"> </div>
</div>

 $(".gallery img").each(function () {
     $(this).attr("src",$(this).attr("src").replace("200/200", "400/400"));
     setTimeout(function(){            
     $(".overlaydiv").hide();
     },1000);
 });