开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css延迟图片加载效果

CSS延迟图片加载效果

基础概念

CSS延迟图片加载（Lazy Loading）是一种优化网页性能的技术，它通过延迟加载非首屏图片，减少初始页面加载时间，从而提升用户体验。这种技术通常结合JavaScript来实现，但也可以通过纯CSS实现简单的延迟加载效果。

相关优势

提升页面加载速度：减少首屏加载的资源量，加快页面显示速度。
节省带宽：用户只加载他们实际看到的图片，减少不必要的数据传输。
改善用户体验：用户在滚动页面时，图片按需加载，减少等待时间。

类型

纯CSS实现：利用CSS的content-visibility属性和will-change属性来实现简单的延迟加载效果。
JavaScript实现：通过监听滚动事件，动态加载图片。

应用场景

长页面：如新闻网站、博客等，页面包含大量图片。
电商网站：产品详情页包含多张图片。
社交媒体：用户动态或帖子中包含大量图片。

示例代码（纯CSS实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Lazy Loading</title>
    <style>
        .lazy-image {
            width: 100%;
            height: 300px;
            background-color: #f0f0f0;
            content-visibility: auto;
            will-change: transform;
        }
        .lazy-image img {
            width: 100%;
            height: auto;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .lazy-image img.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="lazy-image">
        <img data-src="image1.jpg" alt="Image 1">
    </div>
    <div class="lazy-image">
        <img data-src="image2.jpg" alt="Image 2">
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll('.lazy-image img');
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        img.classList.add('loaded');
                        observer.unobserve(img);
                    }
                });
            }, { threshold: 0.1 });

            images.forEach(img => {
                observer.observe(img);
            });
        });
    </script>
</body>
</html>

参考链接

遇到的问题及解决方法

图片加载顺序问题：有时候图片加载顺序可能不符合预期。可以通过调整IntersectionObserver的配置参数来解决。
图片闪烁问题：当图片从隐藏到显示时，可能会出现闪烁现象。可以通过CSS的opacity过渡效果来平滑显示。
兼容性问题：部分旧版浏览器可能不支持IntersectionObserver API。可以通过Polyfill来解决兼容性问题。

通过以上方法，可以有效实现CSS延迟图片加载效果，提升网页性能和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

图片延迟加载

src") == '') $(n).attr("src", ERROR_IMG); }); $(".lazy").lazyload({ placeholder : LOADER_IMG,//图片提前占位...threshold : 0,//参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉....event : "scroll",//触发事件 effect : "fadeIn",//图片加载效果 failurelimit : 10 //参数:failurelimit,值为数字.lazyload...默认在找到第一张不在可见区域里的图片时则不再继续加载, //但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题

2.2K5 0

WordPress图片延迟加载(懒加载)

需求当页面图片特别多，默认访问的时候就会将页面全部内容加载完，等待时间过长，体验欠佳，需改进。...如果不进行设置的话，一个页面会一次性加载所有的资源数据，考虑到不可能所有访客会全部将页面看完，也会导致流量的浪费，加载体验上有待提升。这里就采用延迟加载的方案。...延迟加载也称懒加载，前端实现的方式多种多样，可以通过css的属性设为display none，进入到view的图片再改为inline，inlineblock。...在插件设置界面可以选择延迟加载的内容，如：文本、小部件、缩略图、头像、图片、子窗口。如果只想针对图片的话，只需要启动lazy load images即可。...如想要指定某些图片不不需要延迟加载，在图片标签上加入标记类名即可。 Post Views: 293

2.5K3 0

图片选中效果 css

一、图片选中效果图： image.png 二、CSS .pic_box{ width:900px;} .pic_box li{ width:204px; height:154px... $(".show_pic").click(function(){ if($(this).parent().find(".dele_pic").css...("display") == "none"){ $(this).parent().css("border-color","#33FF00").find(".dele_pic...").show(); }else{ $(this).parent().css("border-color","#fff").find(".dele_pic

4.7K3 1

lazyload图片延迟加载适用所有类型

关于lazyload图片延迟加载简单介绍 LazyLoad大家再熟悉不过的一个jquery插件了，它可以延迟加载长页面中的图片....图片不多的页面时，效果并不太明显，但是当页面大图片比较多的时候，这种效果就比较显著了，明显加快了页面的加载速度。...因此，比较流行的wordpress主题，typecho主题，emlog主题等都使用了lazyload图片延迟加载来实现快速加载页面。...在上述代码中，img是延迟加载所有图片，这里你可以根据不同模板作相应改动。...比如我现在使用的大前端主题，可以改成.container img，这样更改后，只延迟加载.container容器内的图片，否则主题侧边的头像和协议图片也跟着延迟加载，等最后才加载出来。

1.1K1 0

Html图片懒加载动画,js实现图片懒加载效果

本文实例为大家分享了js图片懒加载的具体代码，供大家参考，具体内容如下图片懒加载，思路:当鼠标滑动到对应图片的高度时，进行图片的加载； #div{ width: 575px; height: auto...aImgTop = getPos(aImg[i]).top; // 当滚动的时候进行判断,看他的滚动的高度加上它的clientHeight 是否比它的 top 值大 // 如果大或等于说明滚动到当前位置可以加载图片...if (oScrollTop + clientH >= aImgTop) { // 进行图片的加载 aImg[i].src = aImg[i].getAttribute(“_src”); } }...} 当有类似于瀑布流的布局时常用的加载模式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

9.4K7 0

加载动画效果 HTML+ CSS

加载动画效果写在前面在无限的时间的河流里,人生仅仅是微小又微小的波浪。...——郭小川实现效果实现原理通过2个伪元素来设置3条颜色边框通过定位将3个圆弧边框层叠再一起，再通过旋转实现一个圆的效果再给loading添加旋转动画即可要实现文字转动的效果，只需让其反向旋转即可... CSS @keyframes rotate { 100%{ transform: rotateZ(360deg); } } @keyframes

4.1K2 0

css写出爱心版加载效果

纯css写出爱心版加载效果，等待加载也是一种享受现在互联网时代网站何其多，各有各得风格，但是什么样的风格能留住用户的停留观看呢？...就从加载来说，很多加载效果都是同一种风格可能用户经常逛网站早已经习惯，要是你的加载时间比其他网站时间长，效果还是一样的，可能就会关掉你的网站去其他网站观看，但是如果你的加载效果别具一格，有特点，可能用户看你加载效果的时候你的网站就打开了...-7"> equal love css...代码： @import url("https://fonts.googleapis.com/css?

9033 0

图片懒加载组件封装，加载时loading效果，加载失败暂时默认图片

scroll-top Number 是传入滚动值监听并触发组件 mode String 否同image组件的mode属性 loading-mode String 否 looming-gray loading加载中的占位图效果...open-transition Boolean 否 true 是否开启加载成功后的渐现过渡效果 view-height Number 否真机可视窗高度可视区域高度 view-height属性说明...在大量图片在同一个页面使用该组件时可传入可视区域高度，避免重复获取窗口高度你也可以在页面（父组件）传入比真机可视窗高度更大的值当做阈值提前进入加载 loading属性说明值说明 spin-circle...转圈圈 looming-gray 动态灰背景若隐若现 skeleton-1 骨架屏效果1 skeleton-2 骨架屏效果2 你也可以在以此类推在源码上修改或者扩展为你理想的样式使用深度作用选择器...>>>或在插件源码CSS部分上进行样式修改类名元素说明类名说明 .easy-loadimage 图片父元素 .origin-img 源图片 .loading-img 加载占位图 .loadfail-img

1.3K1 0

延迟加载图片的 jQuery 插件：Lazy Load

网站的速度非常重要，现在有很多网站优化的工具，如 Google 的 Page Speed，Yahoo 的 YSlow，对于网页图片，Yahoo 还提供 Smush.it 这个工具对图片进行批量压缩，但是对于图片非常多的网站...，载入网页还是需要比较长的时间，这个时候我们可以使用 Lazy Load 这个 jQuery 插件来延迟加载图片。...Lazy loader 是一个延迟加载图片的 jQuery 插件，在一些图片非常多的网站中非常有用，在在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才加载，这样对于含有很多图片的比较长的网页来说...，可以加载的更快，并且还能节省服务器带宽。...Lazy Loader 使用也非常简单，首先确保你的页面已经加载 jQuery Javascript 库，然后在加载 Lazy Load 的 Javascript 文件： <script src="jquery.js

1.9K4 0

lazyload.js实现图片异步延迟加载

所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。...看看你有没有这JavaScript 所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。...；代码精简，便于操作维护，JS代码仅仅 1.6KB 先决条件是：你的站加载了 Jquery.js 原理：这个特效是少有的即华丽又加速的效果，因为它能判断访客是不是在查看当前图片，若非则加载预留的填充图片...不用担心对访客的友好程度，这个效果会在图片即将被浏览到的时候就开始加载图片; 实现方法：下载 jquery.lazyload.js 下载预填充图片 fill.gif 点此打包下载.../grey.gif", //加载图片前的占位图片 effect : "fadeIn" //加载图片使用的效果(淡入) }); }); 本文由来源 21aspnet，由 javajgs_com

12.8K2 0

第七节图片延迟加载

图片延迟加载/图片懒加载的作用：保证页面打开的速度（3s之后如果首页打不开被称为死亡页面）原理： 1>对于首屏内容中的图片：首先给对应的区域一张默认图片占着位置（默认图需要非常的小，一般可以维持在5kb...以内）当首屏内容都加载完成后（或者也可以给一个延迟的时间），再开始加载真实的图片 2>对于其它屏中的图片：也是给一张默认的图片占位，当滚动条滚动到对应区域的时候，我们再开始加载真实的图片网站性能优化的几种方式...：尽量减少向服务器请求的次数（减少http请求） css/js文件进行合并 icon图片也进行合并--->雪碧图图片的延迟加载数据的异步加载在移动端，如果我做的是一个简单的宣传页，尽量的把css...和js写好内嵌式首屏延迟加载：如果获取的图片地址是错误的当赋值给img的src属性的时候不仅控制台会报错，而且页面中会出现碎图或叉图，所以我们获取图片的地址之后要验证地址的有效性，是有效的才赋值...oimgFir.style.display = 'block'; oimg = null; }; }, 500); 其他屏单张图片延迟加载

7951 0

CSS3 Loading加载效果合集

效果1 CSS .loading { width: 300px; height: 300px; position: relative...效果 ?...效果2 CSS .loading { width: 300px; height: 300px;...，loading设置了margin，在实际项目中需要自己效果 ?...截图不能截动态的效果，动态效果是：正方形在平面内翻转。

1.2K0 0

基于jQuery或Zepto的图片延迟加载插件

当我们网站的页面图片过多时，加载速度就会很慢。尤其是用手机2G/3G访问页面，不仅页面慢，而且还会用掉很多流量。...我们主题之前也都采用了图片的懒加载形式，但都不完美，部分主题还采用了占位图片来控制懒加载，今天换一种js图片懒加载，它原理就是将页面内所有需要加载的图片全部换成一张默认的图片（一般尺寸很小），只有图片在可视区域才去请求加载...实现原理页面打开时首先会加载src里的图片，即很小的加载图；通过监听scroll...事件，当图片在可视区域时，使用data-src替换src，加载真正的图片。...--lazyload.js默认懒加载原图片属性是data-original--><img class="lazy" src="loading.png" data-original="img/example.jpg

3.2K2 0

CSS实现图片磨砂玻璃效果

写在前面偶然看到，整理笔记博文涉及内容：使用CSS实现图片的磨砂玻璃效果Demo 相关属性的简单文档说明理解不足小伙伴帮忙指正「傍晚时分，你坐在屋檐下，看着天慢慢地黑下去，心里寂寞而凄凉，感到自己的生命被剥夺了...--------王小波」 ---- 这里的磨砂玻璃效果主要使用 CSS的滤镜效果实现，滤镜效果是 CSS 的一个模块，它定义了一种HTML元素显示在文档顶层，处理其渲染的方式。...属性实现 backdrop-filter CSS 属性: 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。...CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。...这里的 filter 和最上面的 backdrop-filter 基本类似，包括渲染函数基本相同，filter CSS属性将图形效果（如模糊或移色）应用于一个元素。

9654 1

CSS3图片模糊切换效果

今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter...DOCTYPE html> css3图片过滤效果 body{ background: #eee; } .gallery{ list-style...text-align:center">html5-html5_css3

3.4K4 0

纯CSS实现Logo图片扫光效果

class="ititle"> CSS... } 100% { left: -160px; top: 800px; } } 图片扫光效果实现说明...： 1、用 CSS3 伪元素 :bfore 或 :after 添加一扫光层； 2、用 transform:rotate(-45deg) 旋转 45 度； 3、@ keyframes 规则来控制扫光效果的起始位置和结束位置...； 4、用 CSS 控制位置和动画时间等。

3.8K2 0

CSS 控制鼠标划过，图片放大效果

https://blog.csdn.net/u011415782/article/details/79050167 ♩ 背景今天在做后台管理 CMS 时，对于小图片的显示感觉太大了会浪费页面空间...CSS 核心代码参考 .td-todayWord img{ cursor: pointer; transition: all 0.6s; width: 50px; } .td-todayWord...img:hover{ transform: scale(5); position:relative; z-index:100; } ♬ 效果比较鼠标划过前 ?...上述 CSS 代码，如果去掉 position:relative; z-index:100; ,则图片不会覆盖其他. ?

2.9K3 0

CSS中鼠标滑过图片放大效果

刚刚看了下感觉还不错，纯CSS实现，虽然在开发主题时CSS3用的比较少。...这是一款简单实用的CSS3鼠标滑过图片放大特效，我们可以将它应用在相册中，或者是轮播展示的图片中，这样可以将鼠标移到图片上进行快速预览图片。同时你也可以在此基础上扩展它，比如给图片加投影和边框等。...CSS3中鼠标滑过图片突出放大效果悬停时展开项目我们的下一步是让项目在悬停时展开。...CSS3中鼠标滑过图片突出放大效果向外移动兄弟元素让悬停项的兄弟项远离悬停项是整个过程中很棘手的部分。我们可以使用的一个CSS特性是一般的兄弟组合器。这使我们可以选择位于悬停项之后的所有同级项。...CSS3中鼠标滑过图片突出放大效果向外移动兄弟元素此时悬停效果看起来更加圆滑，不再那么生硬。需要注意的一点是：此最终版本正在使用:focus和:focus-within伪类来支持键盘导航。

8.4K1 0

css 背景图片虚化效果

转载地址：http://blog.csdn.net/ohehehou/article/details/51975539 需求：一个div设置了background: url，现在需要使图片背景模糊，div...DOCTYPE html> css">...style> 我是内容原始效果...：解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。...：注：相似的效果可以通过以上的代码改进而来

3.9K2 0

CSS实现图片悬停文字叠加效果

引言在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。 ?...同时设置一下黑色背景色以及透明度，做一个隐约的效果。...最后设置一下动画过度效果transition，以及一些想要的字体相关的css属性，这里大家可以自行调整 .image { position: relative; width: 30%;...我们也可以修改这个覆盖效果，有模糊的覆盖，也有纯色的覆盖。...我们用这样的代码创建了三个很酷的 CSS Hover 效果。希望这对你有帮助。强烈推荐给你们推荐一下我的个人博客，拥有大量优质文章、面试宝典、算法精选，欢迎访问~

3.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭