element's src attribute replacement so that modified element is rendered first on load

Question

Because of server side restraints I am intending to replace some images on the website using javascript so that they would be the first and only ones to be seen when the page loads.

I had a look at Changing src of dynamically loaded images with jquery and jQuery - Replace main image source with dynamic image source but doesn't directly relate.

The problem I am having with the code below is that the first images would display first and then the second ones, whereas the desired outcome is for the second ones to display on load.

In the sorce code this script is added right below the navigation, which is above all pictures to be changed.

//This replaces the images of the rhs sidebar

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

If you can't change the HTML in the file, you could hide the images untill they are replaced.

At first, hide the images with CSS:

#rightcolumn img {
    visibility: hidden;
}

If you can't access stylesheets, you can create your own (in head):

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

Then replace the srcs with 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];
    });
});