首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

网站图片优化

高质量的压缩方式:当我们把图片体积压缩至原有体积的 50% 以下时,JPG 仍然可以保持住 60% 的品质 以 24 位存储单个图,可以呈现多达 1600 万种颜色,足以应对大多数场景下对色彩的要求,压缩前后的质量损耗不易察觉...使用场景 适用于呈现色彩丰富的图片 大的背景图 轮播图 Banner图 缺陷 处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时,人为压缩导致的图片模糊会相当明显 不支持透明度处理,透明图片需要召唤...256 种颜色,24 位的可以呈现约 1600 万种颜色 比 JPG 更强的色彩表现力,对线条的处理更加细腻,对透明度有良好的支持 缺点 体积太大 应用场景 呈现小的 Logo、颜色简单且对比强烈的图片或背景等...catch(error => console.log(error)); 将 quality 设置为 65-80 可以在文件大小和图像质量之间较好的折衷方案 WebP 优点 像 JPEG 一样对细节丰富的图片信手拈来...,像 PNG 一样支持透明,像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身 官方介绍 与 PNG 相比,WebP 无损图像的尺寸缩小了 26%。

1.5K30

元素滚动高度和图片懒加载

二、元素滚动高度 当一个元素的内容多,高度超出他所在的容器高度,会出现滚动条 1、element.scrollHeight 元素滚动内容的总长度 element.scrollHeight 元素滚动内容的总长度...如果元素没出现滚动条, scrollHeight等于 clientHeight 2、element.scrollTop 滚动的高度 元素滚动的距离 3、window.innerHeight 窗口的高度...如果想学习懒加载的朋友,建议直接观看这篇文章实现图片懒加载(Lazyload),这篇文章写得很好, 懒加载主要是使用于图片比较多的情况,一次性加载所有的图片会给服务器比较大的压力,加载比较慢,所以我们先不加载未出现在页面可视区域内的图片...,等到滚动到可视区域后再去加载。...滚动时offset的值,offset().top为元素距离页面内容的高度 ? 3、把图片data-src换成src值 <!

1.6K20

requestAnimationFrame实现单张图片无缝持续滚动

背景 在很久以前,有写过一个使用 js 实现单张图片持续滚动图片的 代码,但那一版实现会持续操作DOM,向DOM中插入元素,性能较差,最近发现 requestAnimationFrame 通过 动画的方式实现图片滚动更加方便...效果如下 需求描述 需要单张图片在可视区域内无缝持续向上滚动或向左滚动,由于向下和向右属于反着坐标轴移动图片,和正常DOM元素插入展示顺序也相反,遂不考虑此种场景。 代码实现 <!...// run:运行图片轮播 // pause:暂停图片轮播 // imgWrap:图片容器,放置多张图片,整体进行滚动...2022.03.09 更新 2、发现在有些场景下图片onload事件触发之后,依然获取不到图片宽高,而上面我们图片滚动是依赖图片的宽高的,这里需要再加个定时器,轮询获取图片宽高,当确实可以获取到宽高之后...0的边界长度 let boundaryValue = 0; // 是否可以执行滚动动画,保证获取到图片真实宽高之后再开始滚动,否则获取不到宽高,始终不会滚动 let canScroll

3.4K20

setInerval实现图片滚动离开页面后又返回页面时图片加速滚动问题解决

问题: setInerval实现图片滚动,离开页面后又返回页面时图片加速滚动 代码本身实现方案: 在每次页面加载的时候会清除定时器。...问题产生原因: 由于在加载了图片滚动的页面之后,又去到了其他页面,但是定时器没有停止,而页面又没有显示在用户面前,当返回页面的时候,就会把之前定时器中已经移动的图片动画一股脑移动,就会出现如题所述加速滚动的效果...设计图样式,停留3s slider(imageRealHeight, 4000, "roll-animation-1") } else { // 不停留,直接滚动...(scrollTimer) //清除定时器 console.log("失去焦点"); } else { //页面聚焦时开启定时器,即重新初始化banner图片滚动...visibilityChange事件 document.addEventListener(visibilityChange, handleVisibilityChange, false); } // 图片向上滚动

1.2K10
领券