zoukankan      html  css  js  c++  java
  • 获取图片宽高方法

    start:

    常常会做一些业务:根据图片的尺寸来适应弹窗的大小,更加图片的尺寸确定图片的表现方式,等等。。。

    这里就需要先知道图片的尺寸大小来决定页面的布局,这里适应预加载的方式:

    code:

     1 function getImageSize(url) {
     2     var image = new Image();
     3     var dd = $.Deferred();
     4     image.onload  = function () {
     5         var width = image.width;
     6         var height = image.height;
     7         dd.resolve({width,height:width});
     8     }
     9     image.onerror = function () {
    10         dd.reject('errorLoad')
    11     }
    12     image.src = url;
    13     return dd;
    14 }

    上面的方法使用了jQuery deferred,在加载图片成功之后返回宽高,加载失败的时候返回错误信息,

    使用起来也很方便

    1 var src = "http://ss.bdimg.com/static/superman/img/logo/bd_logo1_31bdc765.png";
    2 $.when(getImageSize(src)).done(function (data) {
    3     console.log(data);
    4 })

    tip:

      需要先绑定好图片加载事件在为图片传入src,先传src再绑定的话,可能会某些特殊情况下已经加载了图片,却没响应事件

    end:

      这是一段三年前开发涂鸦板(http://tuya.100bt.com/)需求留下的一段代码,最近做某个需求需要用到,就留下笔记吧

  • 相关阅读:
    Math对象
    MDN中的对象原型
    构造函数的静态成员和实例成员
    js对象的九大特点
    对象数据的使用方法
    创建对象的所有方式
    Linux下gcc编译器的使用
    Linux vim环境设置
    Linux下is not in the sudoers file解决方法
    mySQL相关函数的使用
  • 原文地址:https://www.cnblogs.com/peace1/p/6068512.html
Copyright © 2011-2022 走看看