使用相同的功能加載其他圖像卸載另一個圖像

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"); 
});