javascript - 查找附加图像的高度和宽度？

Question

我有:

for(var i=1;i<10;i++){
    $('#vid_c_'+i).append('<div class="move_2" id="vd'+i+'"></div>');
    $('#vd'+i).append('<img class="class" id="id_'+i+'" src="'+_m[i-1]+'">');
    $("#id_"+i).load(function() {
         var mv_pstimg = document.getElementById('id_'+i);
         var width = mv_pstimg.clientWidth;
         var height = mv_pstimg.clientHeight;
         console.log(height +"   "+width);
    });
}

控制台输出:Uncaught TypeError: Cannot read property 'clientWidth' of null

仅供引用:图像在我的浏览器中加载正常

我也试过

$("img").one("load", function() {
  var mv_pstimg = document.getElementById('id_'+i);
  var width = mv_pstimg.clientWidth;
  var height = mv_pstimg.clientHeight;
  console.log(height +"   "+width);
}).each(function() {
  if(this.complete) $(this).load();
});

同样的结果

Answer 1

你必须使用 Immediately-invoked function expression .问题如下:

jQuery load 函数是异步的。

传递给 .load 的 callback 函数只会在加载图像时运行。

您正在创建的 load 方法的每个回调函数都关闭 loop i 值，而不是 的值i 创建回调时的变量。

for(var i=1;i<10;i++){
    $('#vid_c_'+i).append('<div class="move_2" id="vd'+i+'"></div>');
    $('#vd'+i).append('<img class="class" id="id_'+i+'" src="'+_m[i-1]+'">');

    (function(index){
       $("#id_"+index).load(function() {
          var mv_pstimg = document.getElementById('id_'+index);
          var width = mv_pstimg.clientWidth;
          var height = mv_pstimg.clientHeight;
          console.log(height +"   "+width);
       });
    }(i));
}