前端图片加载优化
2017-10-11 21:28
387 查看
图片是界面显示效果很重要的组成部分,图片加载关系到用户体验、应用性能,优化图片加载的常用策略为:预加载和懒加载。
原文链接
#preload-img{
background: url(http://example.com/image.png) no-repeat -9999px -9999px;
}
但是这种方式会在刚开始页面加载时影响其他内容显示,可以添加一些js
之前在js设计模式-代理模式中有通过虚拟代理方式实现图片懒加载的方法
对于一些内容很长页面,我们希望当用户浏览到相应区域时再加载图片,常用的解决方法是在img元素上使用data-src属性替换src,判断img元素在用户可视区域时动态赋值src属性显示相应图片。
如果是图片墙形式页面,为避免开始加载全部图片需要给图片设置默认高度
设置滚动事件
滚动事件可以节流函数再进行优化
正确使用图片加载可以提高用户体验,保证页面的展示效果,同时又可以在一定程度上缓解服务器的压力,算是前端优化中经常涉及到的部分,了解其中的解决方法和策略可以帮助我们做出更好的产品。
原文链接
预加载
图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要css预加载
利用css的background属性可以预先加载图片,但不显示在屏幕位置内,使用这些图片时路径一致的话,浏览器会优先加载缓存内的图片进行显示,这样就达到了预加载的目的#preload-img{
background: url(http://example.com/image.png) no-repeat -9999px -9999px;
}
但是这种方式会在刚开始页面加载时影响其他内容显示,可以添加一些js
window.onload = function () { let preload = document.createElement('div'); preload.id = 'preload'; document.body.appendChild(preload); }
纯js预加载
利用js实例化图片对象,再赋值应用地址,这样可以实现批量图片预加载window.onload = function () { let images = [ 'http://example.com/image1.png', 'http://example.com/image2.png', 'http://example.com/image3.png', ]; images.forEach((src) => { preload(src); }) } let preload = src => { let img = new Image(); img.src = src; }
懒加载
图片懒加载对于服务器可以起到缓解压力的作用。之前在js设计模式-代理模式中有通过虚拟代理方式实现图片懒加载的方法
let imageEle = (function(){ let node = document.createElement('img'); document.body.appendChild(node); return { setSrc:function(src){ node.src = src; } } })(); //代理对象 let proxy = (function(){ let img = new Image(); img.onload = function(){ imageEle.setSrc(this.src); }; return { setSrc:function(src){ img.src = src; imageEle.setSrc('loading.gif'); } } })(); proxy.setSrc('example.png');
对于一些内容很长页面,我们希望当用户浏览到相应区域时再加载图片,常用的解决方法是在img元素上使用data-src属性替换src,判断img元素在用户可视区域时动态赋值src属性显示相应图片。
如果是图片墙形式页面,为避免开始加载全部图片需要给图片设置默认高度
.img{ min-height: 400px; }
设置滚动事件
let imgs = document.getElementsByTagName("img"); let n = 0; //存储加载图片索引 let lazyload= ()=> { let cHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 for (let i = n,l = imgs.length; i < l; i++) { let img = imgs[i]; if (img.offsetTop < cHeight + scrollTop) { img.src = img.src == 'loading.gif'? img.getAttribute('data-src'):img.src; n = i + 1; } } } window.onscroll = lazyload;
滚动事件可以节流函数再进行优化
正确使用图片加载可以提高用户体验,保证页面的展示效果,同时又可以在一定程度上缓解服务器的压力,算是前端优化中经常涉及到的部分,了解其中的解决方法和策略可以帮助我们做出更好的产品。
相关文章推荐
- 前端性能优化——图片懒加载(lazyload image)
- 前端性能优化之 —— 图片延迟加载 (原理以及实现方式)
- 前端优化:延迟加载图片
- 网页前端优化之滚动延时加载图片
- 【web前端优化之图片延迟加载初探】中午不睡,下午崩溃
- 前端优化——海量图片加载
- 前端页面优化:javascript图片延迟加载
- 前端性能优化--延迟加载js、css、图片等组件
- 前端优化:图片预加载
- 前端性能优化之 —— 图片延迟加载 (原理以及实现方式)
- 前端性能优化:使用媒体查询加载指定大小的背景图片
- 前端网络资源优化之图片"懒加载"
- 前端性能优化--图片懒加载(lazyload image)
- 前端性能优化:使用媒体查询加载指定大小的背景图片
- 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏
- 前端性能优化基础 -- 图片加载方式
- 网页前端优化之滚动延时加载图片示例
- 前端优化之图片延迟加载(lazyload.js)
- 前端性能优化之 —— 图片延迟加载 (原理以及实现方式)
- 网站PC前端图片加载优化---jQuery lazyload