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 加载功能为asyncronous。

传递给.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));
}

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

1 个答案: