使用Leaflet循环创建L.imageOverlay，如何识别加载成败的对应jpg_link？

这里有三种可行的办法，帮你在load/error事件回调里拿到对应的图片链接：

方法1：用闭包捕获当前循环的链接 #

在循环里创建闭包函数，把当前迭代的jpg_link[i]作为参数传入，让事件回调能捕获到这个特定的链接：

for (var i = 0; i < jpg_link.length; i++) {
    jpg_overlay[i] = L.imageOverlay(jpg_link[i], jpg_bounds[i]);
    
    // 闭包保存当前循环的链接
    (function(currentLink) {
        jpg_overlay[i].on("load", function(event){
            console.log("加载成功的链接：", currentLink);
            // 执行加载成功后的操作
        });
        
        jpg_overlay[i].on("error", function(event){
            console.log("加载失败的链接：", currentLink);
            // 执行加载失败后的操作
        });
    })(jpg_link[i]);
    
    jpg_overlay[i].addTo(map);
}

方法2：给ImageOverlay实例添加自定义属性 #

直接给每个创建的ImageOverlay对象添加一个自定义属性，比如imageUrl，之后在事件回调里通过event.target获取这个属性：

for (var i = 0; i < jpg_link.length; i++) {
    jpg_overlay[i] = L.imageOverlay(jpg_link[i], jpg_bounds[i]);
    // 给实例绑定自定义属性保存链接
    jpg_overlay[i].imageUrl = jpg_link[i];
    
    jpg_overlay[i].on("load", function(event){
        console.log("加载成功的链接：", event.target.imageUrl);
        // 执行加载成功后的操作
    });
    
    jpg_overlay[i].on("error", function(event){
        console.log("加载失败的链接：", event.target.imageUrl);
        // 执行加载失败后的操作
    });
    
    jpg_overlay[i].addTo(map);
}

方法3：使用ES6的let声明循环变量 #

如果你的运行环境支持ES6+，可以把循环里的var i换成let i，利用块级作用域的特性，让每次迭代的i都是独立绑定，事件回调能直接访问当前的jpg_link[i]：

// 用let声明循环变量，形成块级作用域
for (let i = 0; i < jpg_link.length; i++) {
    jpg_overlay[i] = L.imageOverlay(jpg_link[i], jpg_bounds[i]);
    
    jpg_overlay[i].on("load", function(event){
        console.log("加载成功的链接：", jpg_link[i]);
        // 执行加载成功后的操作
    });
    
    jpg_overlay[i].on("error", function(event){
        console.log("加载失败的链接：", jpg_link[i]);
        // 执行加载失败后的操作
    });
    
    jpg_overlay[i].addTo(map);
}

内容的提问来源于stack exchange，提问作者Gmap4 guy