深圳企业网站建设价格,wordpress管理工具栏,怎样建立个人网站?,东莞网站建设公司企业1、演示 可以看到#xff0c;图片还在拼命加载的时候#xff0c; 页面上就已经有内容了 2、什么渐进式图片 图片一开始是模糊的#xff0c;然后逐渐的开始变的清晰。如果页面上有一些大图#xff0c;如果直接扔给浏览器的话那么图片的传输时间就会比较长#xff0c;用户就…1、演示 可以看到图片还在拼命加载的时候 页面上就已经有内容了 2、什么渐进式图片 图片一开始是模糊的然后逐渐的开始变的清晰。如果页面上有一些大图如果直接扔给浏览器的话那么图片的传输时间就会比较长用户就会长时间陷入白屏。那么可以先展示一个小图因为小图的尺寸小所以说它能够快速的显现出来然后呢再逐步的给它传输大图大图传输完成之后再显示大图这就是渐进式图片 3、实现方法
3.1 啥也不用做 直接让设计师给你的图片就是渐进式图片就行渐进式图片实现原理jpg图片实际上是可以支持多帧的平时拍照或者是截图一般都是单帧也就是1帧但实际上是可以支持多帧的我们只需要在第1帧里面放一个模糊的小图第二帧的时候呢放一个高清的大图那么在传输的时候首先收到的是1个小帧这个很快就传输完了接下来浏览器会自动处理先把他渲染出来等一会再传输大帧的时候呢再一步一步去替换小帧丰富里面模糊的细节虽然添加了帧数但是图片的大小不会有明显的变化这根jpg里面的内部数据格式相关这里就不说了 这种方法的缺点就是可能有些老浏览器不兼容可能还有就是设计师不给你做 3.2 代码实现 实现原理在最开始的时候大图是隐藏的小图示显示的等大图加载完成显示大图隐藏小图 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.bigImg {width: 100%;height: 100vh;}.smallImg {width: 100%;height: 100vh;}/style/headbodyimg src./big.png alt classbigImg styledisplay: none /img src./samll.png alt classsmallImg styledisplay: block //bodyscriptconst bigImg document.querySelector(.bigImg)const smallImg document.querySelector(.smallImg)bigImg.addEventListener(load, function () {console.log(大图已加载完成小图隐藏大图展示)bigImg.style.display blocksmallImg.style.display none})/script
/html
