js 图片加载时 按比例设置图片宽高_JS自动等比例缩放图片,判断网页与图片加载完成。...
通过document.readyState属性判断网页加载状态,该属性有一下几个值:
uninitialized:对象已产生,但没有任何文件被加载。
loading:加载程序进行中,但文件尚未开始解析。
loaded:部分的文件已经加载且进行解析,但对象模型尚未生效。
interactive:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
complete:文件已完全加载,代表加载成功
代码讲解:
一、图片缩放
1、默认样式中将img的visibility属性设为hidden,即,在JS未操作时,不现实图片加载的进度;
dl背景图片为loading的GIF图。
2、网页打开时,若文档加载状态未完成,即window.document.readyState!==”complete”,则通过setInterval函数来自动检查文档的加载状态;
当window.document.readyState == “complete” 时,代表页面完全加载,调用函数reSize(),遍历id=”IMG”下的图片,用ImgSize()进行缩放和相应样式修改;
设置style.visibility为visible,显示缩放后的图片;
将缩放完成的图片所在的dl背景图片清空:style.backgroundImage=”none”;
clearInterval()清空定时器。
二、ImgSize()函数讲解
if(imgObj.height/imgObj.width>378/308) { //若图片比dl框“窄”
if(imgObj.height>378) //只判断高度不超过dl框即可,若高度超出
{
imgObj.height=378 //缩放图片高度。此时宽度必定小于dl框,不进行操作。
}
}
else //若图片比dl框“宽”
{
if(imgObj.width>308) //只判断宽度不超过dl框即可,若宽度超出
{
imgObj.width=308 //缩放图片宽度。此时高度必定小于dl框,不进行操作。
}
imgObj.style.visibility="visible";
imgObj.style.marginLeft=(308 - imgObj.width)/2+"px";
imgObj.style.marginTop=(378 - imgObj.height)/2+"px";
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if(imgObj.height/imgObj.width>378/308){//若图片比dl框“窄”
if(imgObj.height>378)//只判断高度不超过dl框即可,若高度超出
{
imgObj.height=378//缩放图片高度。此时宽度必定小于dl框,不进行操作。
}
}
else//若图片比dl框“宽”
{
if(imgObj.width>308)//只判断宽度不超过dl框即可,若宽度超出
{
imgObj.width=308//缩放图片宽度。此时高度必定小于dl框,不进行操作。
}
imgObj.style.visibility="visible";
imgObj.style.marginLeft=(308-imgObj.width)/2+"px";
imgObj.style.marginTop=(378-imgObj.height)/2+"px";
};
三、设置图片的dl框中水平、垂直局中
imgObj.style.marginLeft=(308 – imgObj.width)/2+”px”;
imgObj.style.marginTop=(378 – imgObj.height)/2+”px”;
通过以上两个语句,设定图片的左、上间距,为dl宽高减去图片宽高的一半;此时图片将在dl框中水平、垂直局中。
js 图片加载时 按比例设置图片宽高_JS自动等比例缩放图片,判断网页与图片加载完成。...相关推荐
- 未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,变形问题解决
当手机未开启横屏时,设置了宽高为窗口100%的视频,竖屏方向播放时,会有拉伸,可以根据手机宽高比例判断横竖屏状态,来设置旋转视频元素,同时更新设置视频元素宽高(与之前状态的宽高值对调) demo: & ...
- Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
- word如何设置长宽高_word怎样设置图片长宽
Word2007提供了丰富的图片编辑功能,方便用户在不借助Photoshop等图片处理工具的情况下,直接在Word文档中对图片进行编辑.修改,甚至还可以为图片添加倒映.三维效果等.下面就来学习如何在W ...
- html设置长宽高代码_html设置高等于宽
做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结 ...
- absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- 微信小程序动态获取和设置元素宽高
需求 由于设计界面时常常会用到vh和rpx来设置元素的宽高,但是由于每个手机屏幕的高都不确定,而有时候在设计界面时想把内容刚好适应屏幕大小. 解决方法 设置要动态修改宽高的元素. <view c ...
- Android动态设置布局宽高
例如设置一个图片宽高 关键代码: //取控件当前的布局参数 LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) imageVi ...
- word如何设置长宽高_word页面高度怎么设置
Word使用技巧 1.即时取消Word的后台打印 当我们刚刚编辑完一篇文档按了打印命令后,后来又不想打印当前的文档了,那么怎样才能即时取消后台打印任务呢?一般来说,大家在发出打印任务后,程序会自动将打 ...
- html中a标签如何设置行宽高
方法一:float,对a样式盒子float:left让它成浮动 直接演示一下了(实现下面页面) 代码如下 <style>#page{width:120px; /* 在外面画一个区域 */h ...
最新文章
- HDU1074 Doing Homework
- java 首字母小写_java实现将字符串中首字母转换成大写,其它全部转换成小写的方法示例...
- 深度学习caffe的代码怎么读?
- docker服务器、以及容器设置自动启动
- 不要把游戏当游戏,要把游戏当明星
- 高级语言程序设计c 华南理工,华南理工大学高级语言程序设计(C)期末练习题
- 在武大吉奥期间的任务
- Intel 64/x86_64/IA-32/x86处理器 - SIMD指令集 - SSE扩展(7) - 混洗指令 解组合指令
- ajax框架怎么学,Ajax框架之DWR学习(文件上传案例)
- asp.net 设置 excel alignment_Python 进阶(六): Excel 基本操作
- 程序员需要了解的硬核知识之操作系统和应用
- Bert实现多标签文本分类
- php bc gmp,php中ipv6转纯数字和反转
- 『中级篇』Docker-Stack部署wordpress(49)
- 【Android开发】消息提示框与对话框-使用AlertDialog创建对话框
- 计算机软件 退货,如何在在电脑收银系统中实现商品退货
- 【设计模式】设计原则:CARP 合成复用原则
- 2022公司邮箱登录入口官网介绍,个人邮箱用户登录
- 白鲸优化(BWO)算法(含MATLAB代码)
- 新来个技术总监要我做一个 IP 属地功能~
热门文章
- 拓端tecdat|python贝叶斯随机过程:马尔可夫链Markov-Chain,MC和Metropolis-Hastings,MH采样算法可视化
- 拓端tecdat|R语言贝叶斯MCMC:用rstan建立线性回归模型分析汽车数据和可视化诊断
- c#退出窗口跳转_详解C#切换窗口
- python实现二分搜索binary_search
- keras利用flow_from_directoryt自己构建数据集
- python %s用法
- pyspark env: ‘python’: No such file or directory
- Python 读写matlab中.mat文件
- linux ubuntu apache php 网站 'page not found'
- 基于SSM的NBA篮球球队运营系统