zoukankan      html  css  js  c++  java
  • javascript获取动态加载图片的宽度和高度?

    一个是把图片 html()到HTML里面在获取

    一个是用过URL ajax获取

    只要图片加载完毕时才能获取到加载的图片的宽度和高度,你的意思是再图片加载前显示加载等待图片,然后再显示加载后的图片吧?
    只要判断图片是否加载完毕,然后再获取图片属性,下面是个例子,不知道对你有没有帮助:
    /** 动态获取图片的宽度和高度的像素值

              *
             * @param sUrl 图片的url
             * @param fCallback 回调函数,fCallback至少有一个类型为object类型的参数用来接收图片的宽、高、url
             * 
             * usage:
             * var url = "http://mat1.gtimg.com/datalib_img//11-05-26/c/c21ff1138e7349859b49b99312d05baf.jpg";
             * FGetImg(url, function(img){alert(''+img.width+";height:"+img.height+";url:"+img.url);});
             *
             */ 
            var FGetImg = function(sUrl, fCallback) 
            {    
            var img = new Image(); 
            img.src = sUrl + '?t=' + Math.random();    //IE下,ajax会缓存,导致onreadystatechange函数没有被触发,所以需要加一个随机数 
            if (FBrowser.isIE) 
            { 
                img.onreadystatechange = function() 
                { 
                if (this.readyState=="loaded" || this.readyState=="complete") 
                { 
                    fCallback({img.width, height:img.height, url:sUrl}); 
                } 
                }; 
            }else if (FBrowser.isFirefox || FBrowser.isSafari || FBrowser.isOpera || FBrowser.isChrome) 
            { 
                img.onload = function() 
                { 
                fCallback({img.width, height:img.height, url:sUrl}); 
                }; 
            } 
            else 
            { 
                fCallback({img.width, height:img.height, url:sUrl}); 
        } 
     };

    1. <script language="javascript" type="text/javascript">
    2. $(function(){
    3.     var im =newImage();
    4.     im.src = $('#test').attr('loadsrc');
    5.     $(im).load(function(){
    6.       $('#test').attr('src',$('#test').attr('loadsrc'));
    7.       alert(im.width);  //关键是这一句
    8.     })        
    9. });
    10. </script>
  • 相关阅读:
    安装oh-my-zsh
    Ubuntu下安装2017版QQ
    Ubuntu安装Git
    链接libtorrent库时出现的问题
    ubuntu 下重装mysql若干问题
    最简单的epoll的使用范例 : 监听 标准输入 ,并将数据回显到终端
    [转]Linux下CodeBlocks的交叉编译
    各种免费素材下载站点
    Qt5:图片彩色键控,设置图片中指定颜色的像素为透明
    C++:预处理指令
  • 原文地址:https://www.cnblogs.com/ymj0906/p/3399805.html
Copyright © 2011-2022 走看看