使用jquery的所有图像的Src

使用jQuery获取所有图像的src属性

基础概念

在网页开发中，经常需要操作DOM元素，jQuery是一个流行的JavaScript库，它简化了DOM操作。获取所有图像的src属性是一个常见的需求，比如用于图片懒加载、图片预加载或图片分析等场景。

实现方法

1. 基本方法获取所有图像的src

// 获取所有img元素的src属性
var imageSrcs = $('img').map(function() {
    return $(this).attr('src');
}).get();

console.log(imageSrcs); // 输出所有图片src的数组

2. 获取特定容器内的图像src

// 获取特定div内的所有图片src
var containerImageSrcs = $('#container img').map(function() {
    return this.src; // 也可以直接使用DOM属性
}).get();

3. 处理相对路径转换为绝对路径

var absoluteSrcs = $('img').map(function() {
    var src = $(this).attr('src');
    return new URL(src, window.location.href).href;
}).get();

4. 过滤掉空src或无效src

var validImageSrcs = $('img').filter(function() {
    return $(this).attr('src') && $(this).attr('src').trim() !== '';
}).map(function() {
    return $(this).attr('src');
}).get();

应用场景

图片懒加载：获取所有图片src后，可以延迟加载视口外的图片
图片预加载：提前加载页面上的所有图片
图片分析：统计页面上的图片数量、大小等信息
图片替换：批量修改图片src
SEO优化：检查图片是否有alt属性或正确src

注意事项

如果页面有大量图片，直接操作可能会影响性能
动态加载的图片可能需要使用事件委托或MutationObserver
跨域图片可能会受到安全限制
某些图片可能是通过CSS背景设置的，这种方法无法获取

性能优化建议

对于大型页面，可以考虑分批次处理：

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属性。