使用JavaScript在函数外部获取图像宽度（通过URL）
我试图根据两个图像的URL（即实际图像大小）获取它们的宽度。我可以这样做，以便根据结果弹出警报，但实际函数之外的任何内容都会导致两幅图像的宽度值未定义使用JavaScript在函数外部获取图像宽度（通过URL）,javascript,image,function,variables,width,Javascript,Image,Function,Variables,Width,我试图根据两个图像的URL（即实际图像大小）获取它们的宽度。我可以这样做，以便根据结果弹出警报，但实际函数之外的任何内容都会导致两幅图像的宽度值未定义 var w1 = ""; var w2 = ""; var img1 = new Image(); img1.onload = function() { w1 = this.width;}; img1.src = "URL1"; var img2 = new Image(); img2.onload = function() { w2 = th
var w1 = "";
var w2 = "";
var img1 = new Image();
img1.onload = function() { w1 = this.width;};
img1.src = "URL1";
var img2 = new Image();
img2.onload = function() { w2 = this.width;};
img2.src = "URL2";
alert (w1 + " and " + w2);
var img1 = new Image();
var img2 = new Image();
var one, two;
img1.src = "img1.jpg";
img2.src = "img2.jpg";
img1.onload = function() {img2.onload = function() {compareWidth(img1.width, img2.width);}}
var finalchoice;
var compareWidth = function (width1 ,width2){
if(width1 > width2){
finalchoice = img1.src;
alert(finalchoice);
return finalchoice;
}
else{
finalchoice = img2.src;
alert(finalchoice);
return finalchoice;
}
}
想法是在.js文件的后面使用final choice。我建议使用jQuery 只需加载jQuery…>像
var imgWidth = img.width():
警报（w1+“和”+w2）
在加载图像之前执行station，这就是结果显示为未定义的原因
要比较两个图像的宽度，可以使用以下代码
<!DOCTYPE html>
<html>
<head>
<body>
</body>
<script>
var img1 = new Image();
img1.src = "w3javascript.gif";
img1.onload = function() {
document.body.appendChild(img1); //this is optional you can remove it
compareWidth(this.width);
}
var img2 = new Image();
img2.src = "author.jpg";
img2.onload = function() {
document.body.appendChild(img2); //this is optional you can remove it
compareWidth(this.width);
}
var w1;
var compareWidth = function (width){
//here you can do operation with width and height
if(typeof w1 == 'undefined'){
w1 = width;
}else{
if(w1 < width){
alert('do one thing');
}else{
alert('do other thing');
}
}
}
</script>
</html>
var img1=新图像（）；
img1.src=“w3javascript.gif”；
img1.onload=函数（）{
document.body.appendChild（img1）；//这是可选的，您可以删除它
比较宽度（此宽度）；
}
var img2=新图像（）；
img2.src=“author.jpg”；
img2.onload=函数（）{
document.body.appendChild（img2）；//这是可选的，您可以删除它
比较宽度（此宽度）；
}
var-w1；
var compareWidth=函数（宽度）{
//在这里，您可以对宽度和高度进行操作
如果（类型w1==‘未定义’）{
w1=宽度；
}否则{
如果（w1<宽度）{
警惕（“做一件事”）；
}否则{
警惕（“做其他事情”）；
}
}
}
建议只为一个函数加载一个臃肿的库不是一个好主意——如果这是您唯一的想法，那么就在jQuery中隔离代码，这样做并提供它。另外，这个问题似乎是关于函数范围，而不是得到实际的宽度。您的问题是在处理onload事件之前调用警报。设置url将启动下载，完成后将运行onload。。。同时，警报将不等待任何结果并继续执行。@rlemon但他正在函数的外侧声明变量w1，w2？@SumanBogati如果您在“我的评论编辑->我的坏”之前发表评论，我没有完全正确阅读他的代码。@RyanNorman您需要预加载所有图像，完成后您可以比较其中任何图像的宽度。我有一篇关于这样做的博文，但我的博主已经倒下了：/如果我能重新站起来，我会更新。那么这能让我比较img1和img2的宽度吗？它看起来只会在调用每个img时为其运行一次compareWidth函数。是的，您必须按照代码中的说明调用两次compareWidth（）函数，实际上上面的代码是比较两个图像的宽度，请将您的图像分别放在“w3javascript.gif”和“author.jpg”上。我这样做了。我认为这件事的发生是，对于我称之为compareWidth的第一个图像，它将它与某个东西（而不是第二个图像）进行比较。然后，对于第二个图像，我再次调用它，它也是这样做的。我试了两次，用一张大一点的图片画了1张，然后画了2张，我得到了同样的结果。。。“做其他事情”类似于我上面的附录。。。正如我所说的，如果你把两个不同大小的图像放在上面的代码中并运行这个代码，就会出现执行的alert（'do one thing'）或执行的警报（“做其他事情”）
，您可以在不同的条件下完成您的工作（如果，否则），希望这对您有所帮助。