css图片延迟加载 |css3 背景水平渐变

CSS图片延迟加载是一种实现该技术的方式，其原理是先将图片url放在自定义属性中，然后通过CSS来修改图片加载，将图片的实际url替换为自定义属性中的url。当用户滚动到需要展示该图片的位置时，才会去加载该图片。

.lazy-img {
background-repeat: no-repeat;
background-position: center;
/* 预加载占位图片 */
background-image: url('placeholder.jpg');
}
.lazy-img.loaded {
/* 图片加载完成后，将实际url替换为背景图片 */
background-image: none;
}
.lazy-img:not(.loaded) {
/* 在滑动到图片位置后，加载图片 */
background-image: url(attr(data-src));
}

以上code片段中，.lazy-img代表需要实现延迟加载的图片，data-src是自定义属性，用于存放图片的实际url。首先，展示的图片使用占位图片，当图片加载完成后，给图片添加.loaded类名，将背景图片修改为实际url。而为.lazy-img添加:not(.loaded)伪类，用于在滑动到图片位置时，才使用实际url加载图片。

相较于JavaScript实现图片延迟加载，采用CSS进行延迟加载可以更加灵活地控制图片的加载方式，避免图片加载重复和冲突，提高网页加载速度和响应速度。