JS快速获取图片宽高的方法

你的名字 2022-08-06 14:07 229阅读 0赞

原文：[http://www.css88.com/archives/5224][http_www.css88.com_archives_5224]

// 记录当前时间戳
    var start_time = new Date().getTime();
     
    // 图片地址
    var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;
     
    // 创建对象
    var img = new Image();
     
    // 改变图片的src
    img.src = img_url;
     
    // 定时执行获取宽高
    var check = function(){
        // 只要任何一方大于0
        // 表示已经服务器已经返回宽高
        if(img.width>0 || img.height>0){
            var diff = new Date().getTime() - start_time;
            document.body.innerHTML += '
    from:check : width:'+img.width+',height:'+img.height+', time:'+diff+'ms
    ';
            clearInterval(set);
        }
    };
     
    var set = setInterval(check,40);
     
    // 加载完成获取宽高
    img.onload = function(){
        var diff = new Date().getTime() - start_time;
        document.body.innerHTML += 'from:onload : width:'+img.width+',height:'+img.height+', time:'+diff+'ms';
    };

eg:

var src = $(this).attr('src');
                    if (src && src != '') {                    
                        var w, h;
                        var img_url = (src.indexOf("http://") < 0 ? location.href : "") + src + '?' + (new Date().getTime()); // 图片地址
                        var img = new Image(); // 创建对象                  
                        img.src = img_url; // 改变图片的src  
                        // 定时执行获取宽高  
                        var check = function () {
                            // 只要任何一方大于0,表示已经服务器已经返回宽高  
                            if (img.width > 0 || img.height > 0) {
                                w = img.width;
                                h = img.height;
                                clearInterval(set);
                            }
                        };
    
                        var set = setInterval(check, 40);
                        // 加载完成获取宽高,并弹出  
                        img.onload = function () {
                            layer.open({
                                type: 1,
                                title: false,
                                closeBtn: 0,
                                area: [img.width + 'px', img.height + 'px'],
                                skin: 'layui-layer-nobg',
                                shadeClose: true,
                                content: '<img style="display:block;" style="overflow: hidden;" src="' + src + '">'
                            });
                        };
                    };

[http_www.css88.com_archives_5224]: http://www.css88.com/archives/5224

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS根据url获取图片真实宽高 && 上传图片获取真实宽高

根据url获取真实宽高 var url = require("url"); var http = require("http"); var siz

约定不等于承诺〃/ 2023年01月21日 03:27/ 0 赞/ 21 阅读

相关 js获取图片宽高

原文链接：http://www.qttc.net/201304304.html 快速获取图片的宽高其实是为了预先做好排版样式布局做准备，通过快速获取图片宽高的方法比onloa

港控/mmm°/ 2022年08月18日 02:59/ 0 赞/ 282 阅读

相关 JS快速获取图片宽高的方法

原文：[http://www.css88.com/archives/5224][http_www.css88.com_archives_5224] // 记录当前时间

你的名字/ 2022年08月06日 14:07/ 0 赞/ 230 阅读

相关 js获取img宽高

知识点1 如果写了var img = new Image（100 ，100）， img.src = ‘1.png’ ，这样的作用是可以把img缓存到浏览器中，常用来做图片

痛定思痛。/ 2022年07月12日 05:09/ 0 赞/ 217 阅读

相关获取-图片实际宽高

Get on screen image var screenImage = $("image"); // Create new offscre

绝地灬酷狼/ 2022年06月11日 04:55/ 0 赞/ 290 阅读

相关 javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813

谁践踏了优雅/ 2022年06月08日 13:52/ 0 赞/ 411 阅读

相关 js获取原生图片的宽高

var myimage=http://baidu.com/img/data/upload/admin/5a321e69ab0db.jpg;

- 日理万妓/ 2022年06月03日 01:42/ 0 赞/ 278 阅读

相关 javascript 快速获取图片实际大小的宽高

javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813

男娘i/ 2022年05月21日 08:12/ 0 赞/ 263 阅读

相关 JS获取屏幕的宽高。

[JS获取屏幕的宽高。][JS] <html> <script> function a()\{ document.write( "屏幕分辨率为："+scr

谁借莪１个温暖的怀抱￠/ 2022年05月06日 13:46/ 0 赞/ 267 阅读

相关 js获取宽高

引用自[https://www.cnblogs.com/chengzp/p/cssbox.html][https_www.cnblogs.com_chengzp_p_cssb

短命女/ 2021年10月23日 14:30/ 0 赞/ 393 阅读