查找附加图片的高度和宽度？

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

FYI：图像在我的浏览

我也试过装细

$("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加载功能是asyncronous。

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

每换load方法要创建关闭在loopi值，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)); 
}