css3懒加载 提升网页加载效率

最新推荐文章于 2024-08-13 13:39:42 发布
最新推荐文章于 2024-08-13 13:39:42 发布
阅读量496 收藏
点赞数 1
文章标签： html css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1446096586/article/details/107233442
版权

效果图：

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2020.07.09</title>
</head>
<style>
	body{
		margin: 0;
		background-color: #434343;
	}
	.wrap{
		overflow: hidden;
		width: 810px;
		background-color: #2D2D2D;
		margin: 50px auto;
	}
	.wrap img{
			display: block;
			border: 2px solid #4F4F4F;
			float: left;
			border-radius: 10px;  
			}	

</style>
<body>
<div class="wrap">
	<img src="images/1.jpg" height="181" width="198" alt="林允儿">
	<img src="images/2.jpg" height="181" width="198" alt="林允儿">
	<img src="images/3.jpg" height="181" width="198" alt="林允儿">
	<img src="images/4.jpg" height="181" width="198" alt="林允儿">
	<img src="images/5.jpg" height="181" width="198" alt="林允儿">
	<img src="images/6.jpg" height="181" width="198" alt="林允儿">
	<img src="images/7.jpg" height="181" width="198" alt="林允儿">
	<img src="images/8.jpg" height="181" width="198" alt="林允儿">
	<img src="images/9.jpg" height="181" width="198" alt="林允儿">
	<img src="images/10.jpg" height="181" width="198" alt="林允儿">
	<img src="images/11.jpg" height="181" width="198" alt="林允儿">
	<img src="images/12.jpg" height="181" width="198" alt="林允儿">
	<img src="images/13.jpg" height="181" width="198" alt="林允儿">
	<img src="images/14.jpg" height="181" width="198" alt="林允儿">
	<img src="images/15.jpg" height="181" width="198" alt="林允儿">
	<img src="images/16.jpg" height="181" width="198" alt="林允儿">
	<img src="images/17.jpg" height="181" width="198" alt="林允儿">
	<img src="images/18.jpg" height="181" width="198" alt="林允儿">
	<img src="images/19.jpg" height="181" width="198" alt="林允儿">
	<img src="images/20.jpg" height="181" width="198" alt="林允儿">
	<img src="images/21.jpg" height="181" width="198" alt="林允儿">
	<img src="images/22.jpg" height="181" width="198" alt="林允儿">
	<img src="images/23.jpg" height="181" width="198" alt="林允儿">
	<img src="images/24.jpg" height="181" width="198" alt="林允儿">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.js"></script>
	<script>
	$("img").lazyload({
  placeholder : "images/2.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: -200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察
});</script>
</div>

</body>
</html>
屿落丶
关注
css3 懒加载简易使用 提升网页加载效率
m0_49208371的博客
07-09 332
效果图为 代码为： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2020.07.09</title> </head> <style> body{ margin: 0; background-color: #434343; } .wrap{ overflow: hidden; widt
【前端知识之CSS】CSS图片懒加载
weixin_44337386的博客
05-23 2193
本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS图片懒加载的实现方法。
JavaScript与CSS优化——懒加载
最新发布
2401_85293115的博客
08-13 224
在上一篇提到的React代码分割示例中，我们已经看到了如何使用`React.lazy`来实现组件的懒加载。同样的原理也适用于Vue、Angular等其他前端框架。我们可以使用`Intersection Observer API`来实现图片的懒加载。- **节省带宽**：只有当用户滚动到页面的特定部分时，才加载资源。- **提升用户体验**：减少了页面加载时间，提高了用户体验。- **减少初始负载**：用户不需要一次性加载所有资源。
html css js实现图片懒加载
weixin_45485922的博客
05-02 479
原理 img 标签 有个 src 属性 当src 不为空的时候 随着img 元素渲染到页面上的时候 会异步的去加载资源 。 我们只需要 将 未出现在可视区 的 img 元素 src 设置为空即可 等它出现在屏幕 我们 再设置其src <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>懒加载</title> <style
懒加载
程序媛的成长史
10-29 462
1====为.什么用懒加载？          Web应用程序做的最多就是和后台数据库交互，而查询数据库是种非常耗时的过程。当数据库里记录过多时，查询优化更显得尤为重要。为了解决这种问题，有人提出了缓存的概念。缓存就是将用户频繁使用的数据放在内存中以便快速访问。在用户执行一次查询操作后，查询的记录会放在缓存中。当用户再次查询时，系统会首先从缓存中读取，如果缓存中没有，再查询数据库。缓存技术在一定
图片懒加载，带CSS样式以及思路解析
Y159357666的博客
04-15 598
<style> /* 图片懒加载思路 + 最开始加载页面，img的src不赋值(这样就不会去加载图片),把真实图片的地址赋值给img的自定义属性，方便后期想要加载真实图片时候获取 + 如果src不赋值或者加载的图片是错误的，会显示‘碎图’，这样样式不美观，所以；我们最开始让img是隐藏的 可以设置display 也可以设置透明度为0(透明度改变也可以设置过渡效果) + 给图片所在的盒子设置北京占位图（或者背景颜色），在真实图片没...
【网页性能优化】-—— 关于图片懒加载
yan的秘密基地
07-21 1274
懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。全部加载的话会影响用户的体验浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量流量提示以下是本篇文章正文内容，下面案例可供参考。...
12款css3加载图标动画特效
07-24
"12款CSS3加载图标动画特效"提供了一组精心设计的网页加载UI元素，旨在提升用户在等待页面加载时的视觉享受，降低其焦虑感。这些动画特效充分利用了CSS3的强大功能，尤其是关键帧动画（keyframes）特性，创造出各种...
帆软报表填报预览下的懒加载下拉树控件
06-13
总的来说，"懒加载下拉树控件"是帆软报表为了应对大数据量和复杂结构数据展示而设计的一种高效解决方案，它结合了填报预览和懒加载技术，既保证了数据的完整性和准确性，又提高了系统的运行效率，为用户提供更优质的...
纯CSS3实现的圆点发光网页Loading加载动画特效源码.zip
10-31
在本资源中，我们关注的是一个使用纯CSS3编写的网页加载动画特效。这个加载动画以圆点形式呈现，具有发光效果，为用户提供了一种视觉上的反馈，表明页面正在加载内容。下面将详细介绍如何利用CSS3来实现这种效果，...
10种炫酷的CSS3 loading加载动画特效
12-13
【CSS3库】是网页设计领域中的一个重要概念，它指的是由开发者或团队创建的一系列预定义样式和功能，用于简化CSS3（层叠样式表第三版）的使用，提高开发效率，并提供美观的视觉效果。在本案例中，我们探讨的是一个...
ionic(angular)之优化路由（路由懒加载，包括js文件和html，css都按需加载）
01-13
ionic(angular)之优化路由（路由懒加载，包括js文件和html，css都按需加载）
div盒子内容的懒加载
04-09
通过查询数据库里面的数据，每一组数据放在一个div盒子里，拖动滚动条实现惰性加载，也称为懒加载。简单的事例，易学易懂。
DIV懒加载demo
06-26
div懒加载区别于图片懒加载，模仿天猫 京东实现滚动动态加载div
css优化--vue2和vue3中虚拟滚动，懒加载实现
hkduan的博客
03-21 3674
假设实际开发中服务端一次响应10万条列表数据，此时设备屏幕只允许容纳10条，那么用户理论上只可以看见10条数据。此时如果前端将10万条数据全部渲染成DOM元素，可能造成程序卡顿，占用较大资源，非常影响用户体验，那么虚拟滚动技术就完美的解决了这一问题。5、使用css3的transform属性将滚动到上方不可见区域的DOM元素偏移到可见区域，同时进行数据的更新(重绘操作节约性能)。4、计算滚动了几个item到顶部不可见区域。3、计算屏幕容纳几个item。2、列表单个item的高度。
页面滚动信息元素懒加载
qq_42628504的博客
05-31 189
1.引入 懒加载方法代码 <script src="./jquery.min.js" type="text/javascript"></script> <script src="./scrollReveal.js"></script> <script src="./common.js"></script> 2.懒加载元素上面加延迟效果 /数据源 var dataArr = [ { name: "长大平",.
Javascript实现css/js/html懒加载
William Blake
01-07 1253
纯js实现css/js/hmtl懒加载，现在很多前端框架都有封装好的懒加载方式，那么原生该如何实现呢？话不多说　上代码～ 'use strict'; var LazyLoader = (function() { function LazyLoader() { this._loaded = {}; this._isLoading = {}; } LazyLoader....
CSS中如何实现优雅的图片懒加载与性能优化
Samanthaasefield的博客
04-14 1916
当图片进入视口时，JavaScript会获取图片的data-src属性并将其设置为src属性，从而触发图片的加载。它的核心思想是：当用户滚动页面时，只加载用户当前可见或即将可见的图片，而不是一次性加载所有图片。另一种方法是使用CSS的content属性和伪元素（如::before或::after）来显示占位符，然后通过JavaScript在适当的时候替换或显示真正的图片。使用图片优化服务：利用一些第三方的图片优化服务，如自动调整图片大小、格式转换、压缩等，进一步简化图片优化的流程。/* 初始时隐藏 */
页面数据懒加载
eason zhang的博客
07-06 1373
数据懒加载案例： 思路：滑动滚轮，当每次页面滚动条滑动至底部加载一定数量的数据。 conn.php 是连接数据库的文件 首先，在MySQL数据库创建了300条数据 addItem.php
CSS边框设计：提升网页布局效率
- 提高页面加载速度：CSS将样式与内容分离，使得页面更快加载。 - 改版方便：仅需修改CSS文件即可改变布局和样式，无需重置整个HTML结构。 - 设计适应性：通过媒体查询，CSS可以为不同设备（如PC、手机、平板）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

屿落丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值