How to replace all empty <img src=""> on a page with JavaScript on dom loaded?

Question

Hey everybody,

I need a function, that starts, when the DOM is loaded.

In my HTML Page are several empty Image Tags, like and I want to add an Image-Name into the src-property when everything is loaded to get something like

<img src="blank.jpg">.

Best wishes Chris

Answer 1

function replaceSrc()
{

    var images = document.getElementsByTagName('img');

    for(var i = 0; i < images.length; i++)
    {
        var img = images[i];

        if(img.src.length == 0)
        {
            img.src = 'blank.jpg';
        }
    }
}


window.onload = replaceSrc;

OR if you want to add more than one handler for the event:

document.addEventListener('load', replaceSrc, false) //W3C
document.attachEvent('onload', replaceSrc); //IE

With jQuery

   $(document)
     .ready(function() { $('img')
                             .filter(function(){ return this.src.length == 0 })
                                 .each(function () { this.src = 'blank.jpg'})  });

EDIT:

I realized that you probably want to set the src property before the images load so I changed the code to fire on the document's load event which happens before the images start loading.

Answer 2

Use jQuery! It's easy.

$('img').attr('src','new-image-name.jpg')

This will set the src attribute of every img tag to 'new-image-name.jpg'.

Answer 3

With jQuery, this would set the src attribute of all img elements with a blank src attribute to "blank.jpg" on page load.

$.ready(function() {
  $("img[src='']").attr("src", "blank.jpg");
});

Answer 4

Construction <img src=""> is invalid. Never use it.

It's invalid because empty url means url to current page. But current page is HTML document, not image. Browser can make another query of current page and try to use it as image (see this page).

Answer 5

You can use this script.

# Script AddImage.txt
var string pagefile, image, html
# Read in the page file.
cat $pagefile > $html
# Replace all instances of "<img src="blank.jpg">" with the specified image.
while ( { sen -r -c "^<img src=&\>^" $html } > 0 )
    sal -r -c "^<img src=&\>^" ("<img src=\""+$image+"\">") $html > null
# Write page back.
echo $html > { echo $pagefile }

Script is in biterscripting. Save the script in file "C:/Scripts/AddImage.txt", run it with this command.

script "C:/Scripts/AddImage.txt" pagefile("/path/to/page.html") image("blank.jpg")

It will replace previous image with "blank.jpg".