Как получить все изображения из тега img и фоновых изображений с HTML-страницы с помощью JQuery?

Я хочу получить все изображения с HTML-страницы. хотите получить все изображения из <img> источник тегов или получение изображений из фона элемента из содержимого HTML.

Как я могу сделать?

4 ответов


вы можете просто перебирать все элементы на странице и проверять, является ли это изображение или у него есть фон изображения. Самая большая проблема этого решения заключается в том, что он очень медленный (однако его производительность может быть улучшена несколькими способами). Вот код:

$('*').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));
    }
});

для получения изображений из всех тегов изображений я думаю, что вы можете просто перебирать тег изображения


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

для получения всех фоновых изображений вам придется искать свойство фона во всех элементах.


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

для получения изображений из тега img используйте это

var images = [];
$("img").each(function(){
    if(this.src){images.push(this.src);}
});
$('*').each(function(){
    var bg = $(this).css('background-image');
    if( bg && bg != 'none'){images.push(bg);}
});

выбрать все теги на странице с $('img') Чтобы найти все фоновые изображения из содержимого HTML, необходимо просмотреть каждый элемент, проверить, имеет ли он свойство CSS background-image, и если да, то записать значение этого свойства. Я думаю, это будет выглядеть примерно так:

$('*').each(function() {
   if ($(this).css('background-image') != '')
   //record however you're recording it
});