同じ機能を持つ別の画像を読み込むと、他の画像が読み込まれます。

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

私はこの問題を回避することはできません。ご覧のとおり、複数の画像を読み込むために同じ関数を複数回呼び出す必要があります。しかし、最後のものだけがブラウザにロードされます（そしてインスペクタでチェックされます）。

私は間違っていますか？

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