首页 > 代码库 > web图片资源加载与渲染时机笔记
web图片资源加载与渲染时机笔记
浏览器的工作流程就不说了,网上有很多资料。
1.首先,页面中不是所有的<img>标签图片和样式表中的背景图片都会加载
2.当给一个元素设置了display:none属性(此元素为<img>或有背景图的其他元素),图片不会渲染出来,但是会加载。
3.设置了display:none属性的元素的子元素,样式表中的背景图片既不会渲染出来,也不会进行加载,而<img>标签的图片不会渲染,但会加载。
4.重复图片,浏览器只加载一次(熟悉浏览器特性的人都知道,浏览器在请求资源时,会先判断是否有缓存,如果有缓存且缓存未过期,则会从缓存中读取资源,不会再次请求)。
5.不存在元素的背景图片不会被加载。
6.伪类的背景图片不会被加载,只有在触发伪类的时候,伪类样式上的背景图片才会被加载。
应用:
一、展位图,当使用样式表中的背景图片作为占位符时,要把背景图片转为base64格式。这是因为背景图片加载的顺序在<img>标签后面,背景图片可能会在<img>标签图片加载完成后才开始加载,达不到想要的效果。
二、预加载
1.若是小图标,可以合并成雪碧图。
2.把需要预加载的图片加到设置了display:none属性的元素背景图或<img>标签里。
3.在javascript创建img对象,把图片url设置到img对象的src属性里。
web图片资源加载与渲染时机笔记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。