使用相同的功能加载其他图像卸载另一个图像

Question

$(document).ready(function() { 
    function loadSlide(url, zIndex, initLeft){ 
     slide = $("<img />").attr("src", url).on("load", function() { 
      if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
       console.log("broken image!"); 
      } else { 
       $("#my_slider").append(slide); 
       slide.css({ 
        "z-index": zIndex, 
        "left": initLeft 
       }); 
      } 
     });  
    } 

    loadSlide("img/man_slide1.png", 100, "0vw"); 
    loadSlide("img/man_slide2.png", 99, "0vw"); 
}); 

我无法用头围住这个问题。正如你所看到的，我希望多次调用相同的函数来加载多个图像。但只有最后一个加载在我的浏览器中（并在Inspector中检查）。

我在做什么错？

Answer 1

我想通了：

slide = $("<img />").attr("src", url).on("load", function() {

是不是一个全局变量，但当地的职能范围，像这样需要：

var slide = $("<img />").attr("src", url).on("load", function() {

编辑，为了清楚，我把函数变成变量：

$(document).ready(function() { 
     $.loadImage = function loadSlide(url, zIndex, initLeft, className){ 
     var slide = $("<img />").attr("src", url) 
     .on("load", function() { 
      if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
       console.log("broken image!"); 
      } else { 
       $("#my_slider").append(slide); 
       slide.css({"z-index": zIndex, "left": initLeft}).addClass(className); 
      } 
     });  
    } 
    $.loadImage("img/man_slide1.png", 100, "-100vw", "slide1_1"); 
    $.loadImage("img/man_slide2.png", 99, "-100vw", "slide2_1"); 
    $.loadImage("img/man_slide3.png", 98, "-100vw", "slide3_1"); 
    $.loadImage("img/man_slide4.png", 97, "100vw", "slide4_1"); 
});