首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS获取图片原始

最近在给博客的相册模块做优化,需要知道图片的原始大小,我以前的做法是把图片的真实高分别放在data-width和data-height中,效果是达到了,但是总觉得扩展性很低,当不知道图片的大小时,还要一张一张图片的去查看图片信息手动输入图片大小...,很繁琐 获取图片大小: 1.使用innerWidth,innerHeight 使用HTMLImageElement.innerWidth 是可以拿到图片的宽度 但是需要注意的是这里拿到的宽度是图像在CSS...像素中渲染的宽度 也就是说如果图片原始大小1200,使用css或者width属性设置600,那么这里拿到的宽度600,显然用innerWidth获取图片原始尺寸是不靠谱的 2.使用document.createElement...img的宽和 需要注意的是在给img的src赋值时,这是一个异步过程,会存在获取img的宽度时值0(图片还未加载完成),可以在给img赋值之前加上onload事件 var img = document.createElement...img.src = "1.jpg" 3.使用naturalWidth(推荐) 使用HTMLImageElement.naturalWidth拿到图像在CSS像素中固有的宽度,如果可用的话; 否则, 返回0

6.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

javascript 快速获取图片实际大小的

javascript 快速获取图片实际大小的 简陋的获取图片实际的方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...都是0的这个结果很正常,因为图片的相关数据都没有被加载前它的默认就是0,我们需要它加载完所有的相关数据再获取宽和。...从缓存里读取图片不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片。...(){ // 只要任何一方大于0 // 表示已经服务器已经返回 if (img.width>0 || img.height>0) { var diff = new Date...这是一张2560 * 1600大小的图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片非常实用。

5K10

JavaScript与jQuery获取元素的和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素和位置的方法,比较全面,方便自己和需要并搜到此文章的朋友们查看。...可视 clientHeight :元素的可视高度(包括内边距,不包括边框、外边距或滚动条) clientWidth :元素的可视宽度(包括内边距,不包括边框、外边距或滚动条) 自身 offsetHeight...:元素的相对水平偏移位置(左边界距离可视区域最左侧的距离) offsetParent :元素的偏移容器(父元素) offsetTop :元素的相对垂直偏移位置(上边界距离可视区域最上边的距离) 事迹...元素的 width() :获得或设置元素【内容】的;若元素的display:none,其值0 height() :获得或设置元素【内容】的;若元素的display:none,其值0 innerWidth...浏览器相关 $(window).height() :获取浏览器可视窗口的高度; $(document).height() :获取整个网页文档的高度;当网页高度不足浏览器窗口时,返回的是 $(window

2.9K00

java中的onresume_android onCreate onResume中获取 View 0分析

0; 2、在 onResume中 handler.post 中获取控件的为什么是0; 3、在 onResume中的 view.post 中为什么能获取控件; 4、在 onResume 中handler.post...在 View.post 后面为什么执行反而在前面; 针对以上4个疑问进行解答 1、setContentView后获取控件的为什么0; 这个很好理解, setContentView只是解析了 xml...文件并创建了对应的控件,并没有进行控件的测量等工作; 2、在 onResume中 handler.post 中获取控件的为什么是0; ActivityThread.java类中handleResumeActivity...所以 handler.post 消息回先执行导致获取 view 失败。...onResume 之后,所以此时attachInfo == null,从而消息被保存到RunQueue中,而RunQueue在ViewRootImpl的performTraversals被中执行,所以可以获取到控件

35520

第76天:jQuery中的

Document对象的location属性也是引用了location属性也是引用了location对象 Window.location===document.location//true 与window相关的介绍....screen.width .screen.availHeight .screen.availWidth Window.screenTop Window.screenLeft 与document相关的介绍...若没有滚动条,即为元素设定的 若有滚动条,则为原来减去滚动条的 无padding无滚动:clientWidth=style.width 有padding无滚动:clientWidth=style.width...style.width+style.padding*2-滚动条宽度 document.body.clientLeft和document.body.clientTop 指元素周围边框的厚度,如果不指定边框或不定位元素,值0...style.padding*2+(border-width)*2=clientWidth+滚动轴宽度+border宽度*2 offsetLeft和offsetTop 如果当前元素的父元素没有定位,则offsetParentbody

60710

js图片监听onload事件,依然有获取不到的场景

背景 在实际开发中,移动端页面遇到的,采用正常写法,图片 src赋值写在 onload 事件监听 后面,依然会有拿不到 图片真实的场景,获得的图片都为0,真的是好坑啊。...img = new Image() // 加载完成执行 img.onload = function(){ console.log(img.width,img.height) } // 改变图片的...为了避免图片加载失败或不存在等长场景导致定时器一直执行,可以加一个兜底,比如10秒钟之后自动清除定时器。...var img = new Image() // 改变图片的src img.src = img_url // 定时执行获取 var check = function(){ // 只要任何一方大于...0 // 表示已经服务器已经返回 if (img.width>0 || img.height>0) { clearInterval(set); } } var

3.9K20

js获取各种距离和

浏览器窗口的整个页面高度 滚动高度 document.documentElement.scrollTop 浏览器滚动掉的Y距离 鼠标event事件 属性 说明 offsetX 以当前的元素的左上角原点..., 距离元素顶部的距离 offsetY 以当前的元素的左上角原点, 距离元素左侧的距离 clientX 以浏览器窗口(视口)的左上角原点, 距离视口顶部距离, 不随页面滚动而改变 clientY 以浏览器窗口...(视口)的左上角原点, 距离视口左侧距离, 不随页面滚动而改变 pageX 以整个页面的左上角原点, 距离页面顶部的距离, 随页面滚动而改变 pageY 以整个页面的左上角原点, 距离页面左侧的距离..., 随页面滚动而改变 screenX 以计算机显示屏屏幕左上角原点, 距离屏幕顶部的距离 screenY 以计算机显示屏屏幕左上角原点, 距离屏幕左侧的距离 元素的及各种距离 属性...此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离,也就是元素滚动条被向下/向右拉动的距离。

9810

js获取屏幕以及元素的方法

一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的:window.screen.height 屏幕分辨率的:...document.body.clientWidth 网页可见区域:document.body.clientHeight 网页可见区域:document.body.offsetWidth (包括边线的...) 网页可见区域:document.body.offsetHeight (包括边线的) 网页正文全文:document.body.scrollWidth 网页正文全文:document.body.scrollHeight...网页被卷去的:document.body.scrollTop 网页被卷去的左:document.body.scrollLeft 三.滚动相关 scrollHeight: 获取对象的滚动高度。...相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 六.width/clientWidth/offsetWidth以及height之间区别 width是指可见内容的 height是指可见内容的

6.8K20

iOS获取屏幕、设备型号、系统版本信息介绍1、获取屏幕的2、获取设备的型号3、获取系统版本

之前也研究过,这里把我的方法记录下来,本文介绍三个常用的设备信息获取方式: 获取屏幕的。用于在设置控件位置的时候计算相对屏幕的距离 获取设备的型号。...1、获取屏幕的 屏幕的是一个常常需要用到的信息,尤其是当你用代码写UI时。比如当你写一个UILabel,设置其frame时,你想要它居中,而你想为其设置的宽度200,那怎么设置它的x值呢?...获取屏幕的方法如下: // 设备宽度 [UIScreen mainScreen].bounds.size.width // 设备高度 [UIScreen mainScreen]....bounds.size.height 一般来说我们在pch文件里将其设置宏,这样在每个地方就都可以调用了,就不用每次都用这么长一串代码: //设备的 #define SCREENWIDTH...]) 这样你就可以获取版本号了,可以打印出来: NSLog(@"当前运行系统:iOS%@", SystemVersion); 在使用的时候,可以转化为float型的数来进行判断,如: if (

2.3K40
领券