在网页开发中,经常需要操作DOM元素,jQuery是一个流行的JavaScript库,它简化了DOM操作。获取所有图像的src属性是一个常见的需求,比如用于图片懒加载、图片预加载或图片分析等场景。
// 获取所有img元素的src属性
var imageSrcs = $('img').map(function() {
return $(this).attr('src');
}).get();
console.log(imageSrcs); // 输出所有图片src的数组
// 获取特定div内的所有图片src
var containerImageSrcs = $('#container img').map(function() {
return this.src; // 也可以直接使用DOM属性
}).get();
var absoluteSrcs = $('img').map(function() {
var src = $(this).attr('src');
return new URL(src, window.location.href).href;
}).get();
var validImageSrcs = $('img').filter(function() {
return $(this).attr('src') && $(this).attr('src').trim() !== '';
}).map(function() {
return $(this).attr('src');
}).get();
对于大型页面,可以考虑分批次处理:
function processImagesInBatches(selector, batchSize, callback) {
var images = $(selector);
var total = images.length;
var processed = 0;
function processBatch() {
var batch = images.slice(processed, processed + batchSize);
batch.each(function() {
callback($(this).attr('src'), this);
});
processed += batchSize;
if (processed < total) {
setTimeout(processBatch, 0); // 让出主线程
}
}
processBatch();
}
// 使用示例
processImagesInBatches('img', 50, function(src, imgElement) {
// 处理每个图片
});
以上方法可以帮助你有效地获取和使用页面中所有图像的src属性。