位置: 编程技术 - 正文

js获取图片宽高的方法(js获取图片的宽高)

编辑:rootadmin

推荐整理分享js获取图片宽高的方法(js获取图片的宽高),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js获取img的宽高,js获取图片的大小,js获取图片的宽高,js获取图片长宽,js获取图片宽高比,js获取图片的宽高,js获取图片宽高比,js获取图片的宽高,内容如对您有帮助,希望把文章链接给更多的朋友!

本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获。

一、简陋的获取图片方式

结果如下:

宽高都是0的这个结果很正常,因为图片的相关数据都没有被加载前它的宽高默认就是0 于是可以这么优化!

二、onload后在打印

结果如下

通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢,不实用,但只要图片被浏览器缓存,那么图片加载几乎就不用等待即可触发onload,我们要的是占位符。所以有些人通过缓存获取也可以这么写。

三、通过complete与onload一起混合使用为了测试缓存效果,注意以下测试图片的url都不加时间戳

第一次执行,永远是onload触发

你再刷新,几乎都是缓存触发了

从缓存里读取图片的宽高不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。我们常常知道有些图片虽然没有完全down下来,但是已经先有占位符,然后一点一点的加载。既然有占位符那应该是请求图片资源服务器响应后返回的。可服务器什么时候响应并返回宽高的数据没有触发事件,比如onload事件。于是催生了第四种方法

js获取图片宽高的方法(js获取图片的宽高)

四、通过定时循环检测获取看看以下例子,为了避免从缓存里读取数据,每一次请求都带时间戳:

FireFox

IE7 8 9

Chrome

通过以上测试,我们发现定时检测图片宽高的方式要比onload快多了,打印的行数越多表示onload时间越长,毫秒执行一次,基本毫秒内就能获取图片的宽高,chrome甚至在第一次循环的时候就已经获得数据。从以上数据来分析,其实我们可以在定时函数里判断只要图片的宽高都大于0就表示已经获得正确的图片宽高。我们把时间打上,来看看通过定时获取宽高或者onload获取宽高所需要多少时间。

FireFox:

IE

Chrome

这是一张 * 大小的图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片宽高非常实用。

通过大量实例分析比较了js获取图片宽高各种方法的优劣,希望大家根据需要认真取舍。

javascript数据结构之双链表插入排序实例详解 本文实例讲述了javascript数据结构之双链表插入排序实现方法。分享给大家供大家参考,具体如下:数组存储前提下,插入排序算法,在最坏情况下,前

javascript巧用eval函数组装表单输入项为json对象的方法 本文实例讲述了javascript巧用eval函数组装表单输入项为json对象的方法。分享给大家供大家参考,具体如下:在ajax方式做web开发时,经常会遇到会保存前

javascript Slip.js实现整屏滑动的手机网页 有了Slip.js,你只管写HTML,CSS,如果逻辑简单,一行JS代码就可以搞定,大大提升了开发的效率。不吹牛,上面的demo,不到半小时我就写好了。具体怎么

标签: js获取图片的宽高

本文链接地址:https://www.jiuchutong.com/biancheng/386271.html 转载请保留说明!

上一篇:python 循环while和for in简单实例(python whiletrue循环语句)

下一篇:javascript数据结构之双链表插入排序实例详解(javascript数据结构与算法百度云视频资源)

  • 自行申报是什么征收方式
  • 二手房交易需要购房发票吗
  • 一般纳税人转小规模最新政策2022
  • 清算缴纳企业所得税
  • 以前年度损益调整属于哪类科目
  • 村集体土地出租公示
  • 收到银行汇票要去银行办理吗
  • 税收的优惠性政策包括哪些
  • 年化收益率的计算公式
  • 咨询费成本怎么成本结转
  • 旅游业差额开票的票据可以累计一季度吗
  • 按计划成本发出原材料怎么算
  • 劳保用品增值税税率是多少
  • 企业装修期间开工怎么办
  • 销售费用办公费用
  • 如何查询所属税务所
  • 银行电子承兑如何撤回
  • 企业所得税汇算清缴表
  • 腾讯电脑管家怎么修复dll
  • 代发工资要缴纳社保吗
  • 收到预付款计入什么科目
  • 固定资产抵债交不交增值税
  • 富士山的岩石属于什么岩
  • html中display none
  • php开发实例大全
  • php选择结构
  • 昆明紫霞宫的46 道拐
  • 企业所得税按季还是按年
  • 月收入10万以下免增值税
  • dede转zblog
  • 企业一次性伤残补助金赔偿标准
  • 修改公司章程注意事项
  • 纳税申报期和税款所属期的区别
  • 残疾人就业保障金是什么意思啊
  • 公司活动赠送小礼品
  • 直接免征的税款属于政府补助吗
  • sqlserver2016维护计划
  • 非金融企业之间的借款合同要交印花税吗
  • 拍卖车牌收入需要缴纳什么税
  • 小规模超30万附加税有减免吗
  • 研发项目会计分录
  • 收回应收账款账面余额
  • 固定资产是每月折旧吗
  • 242104 税控盘
  • 接手前往年的银行余额不平怎么办?
  • 年初建账主要录入的内容
  • 什么是建账?建账的基本程序是什么?
  • sql server的相关技术知识
  • 搜索框打开
  • win102020年更新
  • windows7/vista/server(no slic)
  • window部署服务
  • 电脑被攻击了怎么修复
  • win10系统无法打开这个应用
  • centos control-d
  • hp电脑系统win8系统
  • win8 系统设置
  • win8的显示设置
  • ubuntu20安装unity桌面
  • js函数的作用
  • 前端node跨域处理
  • jq读取json
  • unity引擎用什么模拟器
  • 使用权资产
  • nodejs cicd
  • string剪切
  • nodejs遍历json数据
  • shell脚本ll
  • jquery有哪些
  • html5 树形控件
  • 推荐几个非常有趣的书
  • 谈谈我对美国的印象
  • python能不能开发微信小程序
  • 不配合税务检查的法律责任
  • 生猪屠宰行业
  • 网上申报纳税小程序下载
  • 出口退税中的留抵税额
  • 北京市国家税务网
  • 新车怎么上深圳牌
  • 摩托车的消费税计税依据
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设