浏览器渲染页面的时候,遇到图片标签或者css中的背景图片设置,先会到本地缓存中寻找是否已经下载了这张图片,如果已经下载过了就直接从缓存中加载;否则会到图片指定的路径下载到本地缓存。而且这种下载是阻塞式的(部分浏览器内核已经实现异步加载图片。比如火狐)。也就是说在下载这些图片的时候,页面渲染处于暂停状态,必须等到图片下载完成了再继续渲染。 所以,如果一个页面中有大量的图片需要加载,先不说图片本身的大小对下载速度的消耗,每次图片下载都是一次http请求,都要经历3次协议握手,这对页面加载速度的影响是显而易见的!!如果图片再大一点,每张一两百K,杯具了…… 那么如何管理这些页面图片、背景图片以加快页面渲染速度呢?下面,我将我的一些经验分享给大家。 一、页面图片处理 1.延迟加载 1)所需技术: lazyload 2)原理: 先使用一种空白的图片grey.gif代替指定的图片元素(lazyLoad允许指定页面上那些图片需要延迟加载。比如$("img.lazy").lazyload()表示class为lazy的图片延迟加载。$("img ").lazyload()表示所有图片都延迟加载)。 当页面滚动条滚动到该图片时,再将图片的src还原。 有时,你可能浏览某些网页时,滚动页面滚动条时发现有些图片显示为正在加载。就是使用这种技术实现的。
select标签是很让人抓狂的一个: 无法设置下拉框的样式,偏偏各大浏览器解析出来的默认样式又不同 ie下无法设置高度,只能通过font-size将其撑得更大一点。还想更高一点?那就把font-sieze再搞大一点吧! 无法模拟点击事件,手动触发事件使下拉框展开。但你手动调用一个click时,它只是获得焦点而已。 ie6无法设置透明度,这点及时jquery也拿它没办法。所以,你如果想用一个div铺到它下面然后将select透明度设置为0来美化它,抱歉ie6不支持! ie6下始终处于最顶层的位置,模拟的弹出层无论你怎么设置z-index,它都会跑到最上面去。 其它的种种坑爹之处欢迎大家来吐槽
所有html元素中select算是比较坑爹的一个。他让人抓狂的地方主要是: 不同的浏览器显示的默认下拉框样子不完全相同 IE下无法手动设置select的高度(这是最坑爹的!),只能靠font-size撑起来 select右侧的下拉箭头是无法使用背景消除的,这就导致无法使用css进行美化 总结起来,解决办法主要有: 将select隐藏掉,而使用div进行模拟 将select透明度设置为0,然后使用相对定位在下方加一个长得很像select又美化了的div 隐藏方案一般原理如下: 找到页面需要处理的select,将其隐藏 根据select的option,创建一个li列表(当然也可以是div),并隐藏。 在select的位置创建一个div,显示select的值(selected的option)。并使用css对其进行美化,使其看起来像一个select 添加事件,使点击“select”的时候,显示li列表。并使用相对定位,让这个列表显示在“select”下方 对li列表添加事件,模拟下拉框的选值过程(点击事件和键盘↑↓事件都要模拟) 选值完成后,要将选的值显示到上方的“select”,并设置真正的select的值 当然,如果你想做的更复杂点,还可以添加选项搜索、多选、多选后的选项删除等。当时一般原理都跟上面差不多。网上也有很多这样的插件。
网页中经常有一种三角形的图标,鼠标点一下会弹出一个下拉菜单之类的(之前淘宝也有,不过现在改版好像没有了): 之前以为是个png图标背景,后来在bootstrap中看到有一个图标样式叫做caret的用来实现这种效果。没想到用CSS也能实现这个效果。 看了下源码是这样的: .caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } 研究一番之后,发现原理是这样的:首先,需要把元素的宽度、高度设为0; 然后设置边框样式,最关键的也在这里。 这里我们先做一个实验,如果一个元素具有下列样式: { width: 0; height: 0; border: 4px solid; } 效果是什么?没错是个正方形: 因为元素宽度、高度都为0,