图片列表页面的加载优化

起因

源于文件拍照的列表页预览图，由于图片过大，后端设计时又没有考虑到略缩图的设计，原图片加载时会有加载到一半图片截断的显示效果，为避免这种显示问题，决定使用默认图片填充和js隐式加载图片的方式。

方案

1.为每个img标签添加统一默认的src指向默认显示的小图，同时为每个标签赋值data-original属性指向图片真正的地址
2.页面加载完毕时，针对每一个img标签，创建一个隐藏img标签加载其data-original属性指向的图片，加载完毕后将该img标签src属性修改指向正确的图片地址。
demo如下：

<!DOCTYPE html>
<html>
<head><title>图片延迟加载</title><meta charset="utf-8"><style>img{height: 300px;width: 300px;}</style>
</head>
<body><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589288897169&di=bf1b75fb9cc67483250a10a9b83ce72c&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F3%2F1920x1080%2F1372990711605.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://p1.hoopchina.com.cn/personPic/f0eda54a-4601-47ee-979e-83a5e0d9f59b.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://inews.gtimg.com/newsapp_match/0/10902577377/0.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://pic.rmb.bdstatic.com/5043a29281b583fbdbd1ce66e134c3a8.jpeg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://img0.imgtn.bdimg.com/it/u=2165776750,2822679240&fm=26&gp=0.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://h.hiphotos.baidu.com/zhidao/pic/item/5fdf8db1cb1349548e51ce14504e9258d1094a76.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://i0.hdslb.com/bfs/article/91d931443c91a7e297b04ea548d77cdaad3b979e.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://img1.imgtn.bdimg.com/it/u=1467078954,571514791&fm=26&gp=0.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://img0.imgtn.bdimg.com/it/u=1935098892,2602167784&fm=26&gp=0.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://dik.img.kttpdq.com/pic/1/614/43e960e29f3a5cea_1680x1050.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://inews.gtimg.com/newsapp_match/0/5646911939/0.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://5b0988e595225.cdn.sohucs.com/images/20190311/8bd169f753bc420fb87354583329c644.png" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://5b0988e595225.cdn.sohucs.com/images/20181204/db468d8eddd04f888a3be04a506f1789.jpeg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="http://imgsrc.baidu.com/forum/pic/item/881b3c01213fb80e653693033ad12f2ebb389475.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589289791585&di=52f914b1703dd148ff1c333f31d68294&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fspace%2Fpic%2Fitem%2F0b46f21fbe096b635a35f1f90c338744ebf8ac6f.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3893776641,1745824786&fm=26&gp=0.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589289844646&di=8919e223c716f1a480a58b79fb795299&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F8435e5dde71190ef6b0dcde6cd1b9d16fdfa6010.jpg" ><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1227865842,733762983&fm=26&gp=0.jpg" data-original="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589289859690&di=e17f5f0414a4386ccd67ae45fb994e54&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181027%2F1a2f1d7258444b1c831917d950de2d07.png" ><script>window.onload = function(){var imgs = document.getElementsByTagName("img");var tempImg = new Array(imgs.length);for(var i=0;i<imgs.length;i++){img = imgs[i];tempImg[i] = document.createElement("img");tempImg[i].src = img.attributes["data-original"].value;tempImg[i].onload = function(index){imgs[index].src = imgs[index].attributes["data-original"].value;}.bind(this,i)}}</script>
</body>
</html>

完整代码地址：github地址

图片列表页面的加载优化相关推荐

html页面懒加载灰度图片大小,小程序初级指南--图片及其优化
图片格式开发中常见的图片格式有 GIF.PNG8.PNG24.JPEG.WEBP. 我们需要根据图片格式的特性和场景需要选取适合的图片格式,而不是设计给什么用什么. PNGPNG 的目的是替代GIF ...
前端页面图片加载优化
前端页面图片加载优化问题:前端页面如果图片资源过多或者过大就会导致用户加载图片时间过长,导致用户体验下降我总结的优化思路与方法有以下几种一.将图标换成icon字体管理如果项目存在大量的图表用的 ...
Android图片加载优化方案
1. 前言在电商APP中,图片在整个页面中占比最大,清晰高质量的图片能够明显提升转化率.但是APP运行环境错综复杂,往往我们会遇到图片压缩导致模糊.列表加载长时间显示空白图.查看大图黑屏过久.甚至 ...
网页图片加载优化方法总结
目录 1.压缩 2.直接一开始用压缩过的体积小的图,等加载完毕后,再用高清无码图来替换掉 3.使用base64编码代替图片 4.更好的图片格式 5.合并图片sprite(雪碧图) 6.使用css.sv ...
webview 加载php页面内容,WebView加载优化的方法介绍
本篇文章给大家带来的内容是关于WebView加载优化的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. WebView加载优化当WebView的使用频率变得频繁的时候,对于其 ...
jQuery页面滚动图片等元素动态加载实现
一.关于滚动显屏加载常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量 ...
浏览器页面资源加载过程与优化
评价页面性能好坏的核心之一就是页面的加载速度,而页面加载速度的关键就是页面资源的加载.本文将从浏览器浏览器页面资源加载过程展开分析,来引出页面关键请求路径的概念,并给出如何优化该关键请求路径的一些方法 ...
前端图片加载优化的各种技巧
目前的前端图片加载优化技术有很多,像懒加载/预加载,img上的srcset属性以及picture标签,新的图片编码格式以及Client Hints等. Client Hints 顾名思义,client ...
lazyload.css,图片加载优化及图片lazyload自适应 - 轩枫阁
前言本文介绍针对轩枫阁V3主题开发过程中,遇到的图片问题及加载优化. 图片居中裁剪本站的每一篇文章,都会配一张570×200的特色图像,使文章不那么单调. 然而移动端移动端首页图片为60×60的正 ...

图片列表页面的加载优化

起因

方案

图片列表页面的加载优化相关推荐

最新文章

热门文章