jQuery更改img src且不顯示舊

Question

我正在使用jQuery替換圖像src路徑的一部分。 它可以完美工作，但在顯示新圖像源之前仍會渲染舊圖像。 我想知道是否可以使用.hide（）和.show（）來防止渲染舊圖像。

$(document).ready(function() {
    $(".gallery img").each(function() {
        $(this).attr("src", function(a, b) {
            return b.replace("s72-c", "s190-c")
        })
    })
});

圖片網址結構：

舊圖片網址： http ： //www.example.com/s72-c/sample.jpg

新圖片網址： http : //www.example.com/s190-c/sample.jpg

Answer 1

迭代前的hide()和迭代中的show()

$(document).ready(function() {
    $(".gallery img").hide().each(function() {
        $(this).attr("src", function(a, b) {
            return b.replace("s72-c", "s190-c")
        });
        $(this).show();
    })
});

Answer 2

$(document).ready(function() {
    $("img").each(function() {
        $(this).attr("src",'');
        $(this).attr("src", function(a, b) {
            return b.replace("https://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg", "https://upload.wikimedia.org/wikipedia/commons/7/79/Apple_seeds_-_variety_Gala_%28aka%29.jpg")
        })
    })
});

檢查此代碼

Answer 3

使用removeAttr()

$(document).ready(function() {
    $(".gallery img").each(function() {
        var src = this.src;
        $(this).removeAttr('src').attr("src", src.replace("s72-c", "s190-c"));
    })
});