Question

我想更改图像的src属性，然后读取新图像的宽度。不幸的是，JQuery load（）函数似乎在加载图像并设置宽度之前触发。你知道怎么解决它吗？

＆＃13;

function buildLoad(rc){
	alert(rc.width());
}

var rc = $('img.myimg');
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
rc.load(buildLoad(rc));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">

＆＃13;

Answer 1

尝试onload事件

$(document).ready(function(){
    
    var rc = $('img.myimg');
    rc.load(function(e){

        console.log("Height:" + e.currentTarget.height, "Width:" + e.currentTarget.width)

    });
    
    rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">

Answer 2

特别是在您的代码中，问题是您调用buildLoad(rc)而不管load事件。你需要做的是调用一个在load完成后运行的包装函数：

rc.load(function() { buildLoad(rc) })

＆＃13;

function buildLoad(rc){
	alert(rc.width());
}

var rc = $('img.myimg');
rc.attr({'src':'https://imagizer.imageshack.us/v2/379x674q90/661/Nt07gm.jpg?'+Math.random()});
rc.load(function() { buildLoad(rc) })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="myimg" src="">

＆＃13;

无论如何 - 当前浏览器中有关于图片load事件的几个已知问题，您可以阅读有关here的更多信息。

Answer 3

使用Jquery一个函数。

http://api.jquery.com/one/

尝试以下代码。

$（“img.myimg”）。one（“load”，function（）{ //获取图像的宽度 }）。attr（“src”，“New path”）;

在加载图像之前会触发JQuery load（）

3 个答案: