文档章节

处理静态页面中的图片,自使用屏幕大小

会飞的篮板球
 会飞的篮板球
发布于 2017/08/30 16:39
字数 259
阅读 3
收藏 0

处理静态页面中的图片,自使用屏幕大小

<script type="text/javascript">
	$(document).ready(function(){
		var _w = parseInt($(window).width());//获取浏览器的宽度
		alert(_w);
		$("img").each(function(i){
		var img = $(this);
		var realWidth;//真实的宽度
		var realHeight;//真实的高度
		//这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
		$("<img/>").attr("src", $(img).attr("src")).load(function() {
		/*
		如果要获取图片的真实的宽度和高度有三点必须注意
		1、需要创建一个image对象:如这里的$("<img/>")
		2、指定图片的src路径
		3、一定要在图片加载完成后执行如.load()函数里执行
		*/
		realWidth = this.width;
		alert(realWidth);
		realHeight = this.height;
		//如果真实的宽度大于浏览器的宽度就按照100%显示
		if(realWidth>=_w){
		$(img).css("width","100%").css("height","auto");
		}
		else{//如果小于浏览器的宽度按照原尺寸显示
		$(img).css("width",realWidth+'px').css("height",realHeight+'px');
		}
		});
		});
	}); 
</script>

.replace(/falshStaticLink/g, "A") //jQuery的替换方法

© 著作权归作者所有

共有 人打赏支持
会飞的篮板球
粉丝 0
博文 9
码字总数 3178
作品 0
私信 提问
「前端那些事儿」② 极限性能优化

前言 前端的工作并不仅仅是实现「视觉&交互稿」,想要开发一个高性能易维护的「完美」站点并未易事,针对前端的性能优化贯穿着项目开发的始终,绝不是交互口中的「拖拽工人」! 然而前端优化...

木羽zwwill
2017/11/06
0
0
视网膜New iPad与普通分辨率iPad页面的兼容处理

一、这是篇经验分享 就算不是果粉也应该知道,iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”,其设备分辨比(之前有详细介绍,点击这里查看)是...

大雄小熊
2014/01/21
0
0
移动H5前端性能优化指南

移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒完成或使用Loading 4. 基于联通3G网络平均338KB/s...

32氪
2017/07/31
0
0
iOS安装包瘦身指南

先看下Apple对安装包大小的限制: 资源优化 1.删除无用资源 解压ipa文件,检查是否有无用资源存在。 现在应该没有APP需要支持iPhone4以下的机型了,所以1X的图片可以全部删掉。3X的图片是保留...

秦无炎
2016/11/03
318
0
七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局。布局可以创建任何你想要的UI外观; 从简单的标题或侧...

祈澈姑娘
2017/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Alibaba Java诊断利器Arthas实践--使用redefine排查应用奇怪的日志来源

背景 随着应用越来越复杂,依赖越来越多,日志系统越来越混乱,有时会出现一些奇怪的日志,比如: [] [] [] No credential found 那么怎样排查这些奇怪的日志从哪里打印出来的呢?因为搞不清...

hengyunabc
24分钟前
0
0
home hosts

home hosts lwk@qwfys:~$ cat /etc/hosts127.0.0.1 localhost127.0.1.1 qwfys192.168.56.101vm600.qwfys.com39.108.212.91alpha1.ppy.com39.108.117.122alpha2.p......

qwfys
30分钟前
0
0
大数据教程(6.1)hadoop生态圈介绍及就业前景

1. HADOOP背景介绍 1.1、什么是HADOOP 1.HADOOP是apache旗下的一套开源软件平台 2.HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理 3.HADOOP的核心组...

em_aaron
今天
2
0
hadoop垃圾回收站

在生产生,hdfs回收站必须是开启的,一般设置为7天。 fs.trash.interval 为垃圾回收站保留时间,如果为0则禁用回收站功能。 fs.trash.checkpoint.interval 回收站检查点时间,一般设置为小于...

hnairdb
昨天
1
0
腾讯与Github的魔幻会面背后的故事…

10月22日,腾讯开源管理办公室有幸邀请到Github新晋CEO Nat Friedman,前来鹅厂参观交流。目前腾讯已经有近70个项目在Github上开源,共获得17w stars,世界排名11位。Github是腾讯开源的主阵...

腾讯开源
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部