javascript - 元素的 src 属性替换，以便在加载时首先呈现修改后的元素

Question

由于服务器端的限制，我打算使用 JavaScript 替换网站上的一些图像，以便它们成为页面加载时第一个也是唯一一个看到的图像。

我查看了Changing src of dynamically loaded images with jquery和 jQuery - Replace main image source with dynamic image source但没有直接关系。

我在使用下面的代码时遇到的问题是，第一个图像将首先显示，然后是第二个图像，而所需的结果是第二个图像在加载时显示。

在源代码中，此脚本添加在导航的正下方，位于所有要更改的图片之上。

//这替换了右侧边栏的图像

function changeButtons(){
var images = $("#rightcolumn img");
var imageSrc;
var loginName = "login.gif";
var logoutName = "logout.gif";
var onlineOrdersName = "myonlineorder.gif";
var basketName = "basket.gif";
var checkoutName = "checkout.gif";
var checkoutOffName = "checkout_off.gif";

images.each( function(){

 imageSrc = ($( this ).attr("src")); 
   varsrcnew = "";

   if(imageSrc.indexOf(loginName) >= 0)
   {
     srcnew = "pathToFile/login_new.png";
     $( this ).attr("src", srcnew)     
   }
   else if(imageSrc.indexOf(logoutName) >= 0)
   {
      srcnew = "pathToFile/logout_new.png";
     $( this ).attr("src", srcnew) 

   }

   ...
   ...
   ...


});
}

document.addEventListener('DOMContentLoaded', function() {
   changeButtons();
});

</script>

Answer 1

如果您无法更改文件中的 HTML，您可以隐藏图像直到它们被替换。

首先，用CSS隐藏图像:

#rightcolumn img {
    visibility: hidden;
}

如果您无法访问样式表，您可以创建自己的样式表(在 head 中):

$('head').append('<style>#rightcolumn img {visibility: hidden;}</style>');

然后将 src 替换为 JavaScript:

$(document).ready(function () {
    var $images = $("#rightcolumn img");            
    $images.each(function (idx, img) {
        var imgPath = img.src.split('/'),
            imgName = imgPath.pop();
        imgName = imgName.split('.');
        $(img).load(function () {
            $(this).css('visibility', 'visible');
        });
        img.src = imgPath.join('/') + '/' + imgName[0] + '_new.' + imgName[1];
    });
});