首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS获取图片原始

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

6.3K20

jquery 滚轮插件 示例 - 整滚动

滚动的需求 ? ? ? ? ? 编写通过滚轮上下切换这五个屏幕效果。 要做出这个效果,其实不用说,首先要把这五个div的基本HTML+CSS给写出来先。 准备好五个图片 ? 001.png ?...005.png 好了,有了这些基本图片之后,就是实现出来啦。 在下面实现代码的时候需要使用定时器来控制函数节流,因为鼠标的滚轮事件触发非常快,必须限制之后才能有较好的体验,概念如下。... <script type="text/javascript" src="<em>jquery</em>-mousewheel/<em>jquery</em>.mousewheel.min.js...网页不再只是承载单一的文字和<em>图片</em>,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

4.5K20

JavaScript与jQuery获取元素的、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素高和位置的方法,比较全面,方便自己和需要并搜到此文章的朋友们查看。...可视高 clientHeight :元素的可视高度(包括内边距,不包括边框、外边距或滚动条) clientWidth :元素的可视宽度(包括内边距,不包括边框、外边距或滚动条) 自身高 offsetHeight...:元素的相对水平偏移位置(左边界距离可视区域最左侧的距离) offsetParent :元素的偏移容器(父元素) offsetTop :元素的相对垂直偏移位置(上边界距离可视区域最上边的距离) 事迹高...scrollLeft :是该元素的显示(可见)的内容上边与该元素实际的内容的距离(滚动条滚去的宽度) scrollTop :是该元素的显示(可见)的内容与该元素实际的内容的距离(滚动条滚去的高度) jQuery...元素的高 width() :获得或设置元素【内容】的;若元素的display:none,其值为0 height() :获得或设置元素【内容】的高;若元素的display:none,其值为0 innerWidth

2.9K00

jQuery实现图片懒加载

一、懒加载 1.什么是懒加载 目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片...2.懒加载的原理 页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。...二、获取屏幕高度:jquery的height()和javascript的height 1、jquery的各种高度 首先来说一说$(document)和$(window),如下: $(document)...document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin javascript的各种高度 网页可见区域[...、Opera 以及 Safari 可视窗口高度,不包括浏览器顶部工具栏: window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari 网页正文全文(

13.6K20

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

javascript 快速获取图片实际大小的高 简陋的获取图片实际高的方式 // 图片地址 var img_url = '13643608813441.jpg' // 创建对象 var img =...高都是0的这个结果很正常,因为图片的相关数据都没有被加载前它的高默认就是0,我们需要它加载完所有的相关数据再获取宽和高。...通过onload就能获取到图片高了。但onload大一点的图通常都比较慢,不实用,但只要图片被浏览器缓存,那么图片加载几乎就不用等待即可触发onload,我们要的是占位符。...从缓存里读取图片高不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片高。...这是一张2560 * 1600大小的图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片高非常实用。

5.3K10
领券