Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/446.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript for循环创建图像(),但获取宽度和高度失败_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript for循环创建图像(),但获取宽度和高度失败

Javascript for循环创建图像(),但获取宽度和高度失败,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我无法获得一些图像的宽度和高度,但在一些图像上,我可以通过图像.width和图像.height。为什么有些人能,有些人不能 var i = 0; var len = imgitem.length; for( i = 0; i < len ; i++){ imgSrc = imgitem[i].url; imgObj = new Image(); imgObj.src = imgSrc; imgObj.onload = function(){

我无法获得一些图像的
宽度
高度
,但在一些图像上,我可以通过
图像.width
图像.height
。为什么有些人能,有些人不能

var i = 0;
var len = imgitem.length;
for( i = 0; i < len ; i++){
    imgSrc = imgitem[i].url;

    imgObj = new Image();
    imgObj.src = imgSrc;
    imgObj.onload = function(){
        console.log(imgObj.width);
        imgObjW = imgObj.width;
        imgObjH = imgObj.height;
    };

    /*限制最大height*/
    if(imgObjH / imgObjW >= 1.5){
    ......
var i=0;
var len=imgitem.length;
对于(i=0;i=1.5){
......
一些HTML元素

<div class="sfc-pic-play-item" style="width: 100%; overflow: hidden;"><div class="sfc-pic-play-item-wrap"><div class="c-img c-img-s" style="background:none"><img src="http://a.jpg" class="sfc-pic-play-center"></div></div></div>

简单异步+for循环问题:

for(i = 0; i < len ; i++){
(function(){
   var imgSrc = imgitem[i].url;
   var imgObj = new Image();
   imgObj.src = imgSrc; 
   imgObj.onload = function(){ 
     console.log(imgObj.width);
      imgObjW = imgObj.width; 
     imgObjH = imgObj.height; 
     /*限制最大height*/ 
     if(imgObjH / imgObjW >= 1.5){ ......}
   };
   //imgObjH is 0 as it isnt loaded yet
 })();
 }
(i=0;i{ (功能(){ var imgSrc=imgitem[i].url; var imgObj=新图像(); imgObj.src=imgSrc; imgObj.onload=函数(){ 控制台日志(imgObj.宽度); imgObjW=imgObj.宽度; imgObjH=imgObj.高度; /*限制最大高度*/ 如果(imgObjH/imgObjW>=1.5){……} }; //imgObjH为0,因为它尚未加载 })(); }

由于imageObj引用了最新的对象,您的onload处理程序将不会执行您期望的操作。请使用上面的代码来修复或在onload中使用
this
而不是imageObj。此外,如果在那里看起来有点放错了…

,如注释中所述,您的条件必须在onload处理程序中,或者它可能/将在i之前执行法师上膛了

正如Jonas w所指出的,imgObj在当时没有引用正确的对象也会有问题

imgitem.forEach(function(item){
    var img = new Image();
    img.src = item.url;
    img.onload = function(){
        var w = img.width, 
            h = img.height;

        console.log(item, img, w, h);

        if(h/w >= 1.5){
                //...
        }
    }
});

如果这仍然会引发一些错误,我们需要看看您是如何将其适应于您的代码的

您可以共享您的HTML吗?如果(imgObjH/imgObjW>=1.5)这一行
必须在
onload
-handler中执行,有些可以,有些不会,因为有些会得到加载,有些直到uh达到If()条件将此放在onload中如果他解决了计时问题,那么就没有作用域问题。虽然用变量污染全局命名空间很难看。@托马斯:是的,已编辑。但是计时问题不仅包括onload/if,还包括for循环中的onload。我用它无法解决问题,并且有语法错误。@Chang1ng
function
not
function
问题也存在。0.0是!明白了,可能与for循环有关?