• 获取图片宽高方法


    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/)需求留下的一段代码,最近做某个需求需要用到,就留下笔记吧

  • 相关阅读:
    ViewPager
    SpringBoot入门
    SpringMVC拦截器
    QML布局概述(Qt Quick Layouts Overview)
    Ubuntu16.04软件安装错误处理(以安装ssh-server为例)
    VirtualBox实用网络设置
    Ubuntu安装cmake 3.9
    QML学习笔记
    Qt一些方便易用的小技巧
    Qt 4.8.5 + MinGW32 + Qt creater 安装
  • 原文地址:https://www.cnblogs.com/peace1/p/6068512.html
Copyright © 2020-2023  润新知