How to get all images from img tag and background images from HTML page using JQuery?

Question

I want to get all images from HTML page. want to get all images from <img> tag source or get images from element background from HTML contents.

How can I get?

Answer 1

You can just loop over all elements on the page and check if it's an image or it has some image background. The biggest problem of this solution is that it's very slow (however its performance could be improved in several ways). Here is the code:

$('*').each(function(){ 
    var backImg;

    if ($(this).is('img')) {
        console.log($(this).attr('src'));
    } else {
        backImg = $(this).css('background-image');
        if (backImg != 'none') console.log(backImg.substring(4, backImg.length-1));
    }
});

Answer 2

for getting images from all the image tags i think you could simply iterate over a image tag

$('img').each(function(){
alert($(this).attr('src'));
});

for getting all of the background images you will have to look for the background property in all the elements.

$('*').each(function(){
alert($(this).css('background-image'));
});