Javascript判断图片尺寸大小实例分析

前端技术 2023/09/06 JavaScript

通常我们判断js图片大小都是利用images对象，然后再用attr来获取图片地址再进行判断就可以了，下面来看一些例子。
最简单办法：

复制代码 代码如下:

var img=new Image();
    img.src=$(\'#tlogo\').attr(\'src\');
    if(img.width > \'240\'){
        $(\'#tlogo\').attr(\'width\',\'240\');
}

上面例子碰到如果页面没有加载完的时候，这时js就获取不了图片大小了，对此我们可以先判断加载完成否再判断图片大小。

复制代码 代码如下:

<img id=\"img2\" src=\"images/1.jpg\" />
<script language=\"JavaScript\">
    document.getElementById(\"img2\").onload = function () {
        alert(\"图片加载已完成\");
    }
</script>

或者采用jquery：

复制代码 代码如下:

$(\"#imageId\").load(function(){
   alert(\"加载完成！\");
});

至此我们就可以对代码进行优化了

复制代码 代码如下:

$(\"#tlogo\").load(function(){
 var img=new Image();
        img.src=$(\'#tlogo\').attr(\'src\');
        if(img.width > \'240\'){
        $(\'#tlogo\').attr(\'width\',\'240\');
}
});

此处注意:#tlogo 就是你图片地址中加的一个ID这个是必须的。

本文地址：https://www.stayed.cn/item/15475

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案