Jquery图片懒加载和预加载

转x33g5p2x  于2021-09-24 转载在 jQuery  
字(10.3k)|赞(0)|评价(0)|浏览(797)

懒加载

1.什么是懒加载

Lazy Load也叫懒加载，延迟加载，顾名思义，就是在图片未到达可视区域时，不加载图片，我们常常在很多的优秀网站上看到类似的例子，例如迅雷、土豆、优酷等，由于一个网页的图片非常多，一次性加载增加服务器压力，而且用户未必会拉到底部，浪费用户流量，Lazy Load采用按需加载，更快的加载速度从而达到优化网页的目的。

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。

用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。

在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。

2.为什么要用懒加载

  • 能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。
  • 减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
  • 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

3.懒加载的原理

首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中。

当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

4.案例

需要的HTML
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		
  7. 		<style> #image { margin: 0 auto; padding: 10px; width: 80%; border: 1px salmon solid; /*开启弹性布局*/ display: flex; /*wrap：换行，第一行在上方。*/ flex-wrap: wrap; /*或者使用 两端对齐，项目之间的间隔都相等。*/ justify-content: space-between; } .album { width: 150px; height: 150px; box-shadow: 1px 1px 5px silver; border-radius: 10px; animation: key1 3s infinite forwards alternate; } @keyframes key1 { 0% { } 20% { transform:translate(0px ,-13px); } 40% { transform:translate(0px ,15px); } 100% { transform:translate(0px ,0px); } } .album:hover { animation: key 0.5s; } @keyframes key { 0% {} 100% { transform: scale(1.2); } } .p1 { animation: key 4s infinite forwards alternate; font-size: 18; font-weight: bold; color: salmon; box-shadow: 1px 1px 5px silver; border-radius: 10px; width: 150px; border: 1px salmon solid; margin-top: 10px; margin-bottom: 15px; } .div1 { margin: 15px; } .button1{ width: 100px; height: 40px; background-color: #FA8072; border: 1px sandybrown solid; box-shadow: 1px 1px 5px silver; border-radius: 10px; } .button1:hover{ transform: scale(1.2); transition:all 0.5s ease-in-out ; background-color: antiquewhite; cursor: pointer; } * { margin: 0; padding: 0; } .bg { background-color: #f4f5f9; width: 100px; border: 1px solid darkgray; display: none; position: absolute; box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2); z-index: 1000; } .bg ul { list-style-type: none; text-align: center; line-height: 40px; } .bg li:hover { cursor: pointer; background: #eee; color: #CC1A1A; } </style>
  8. 	</head>
  9. 	<body>
  10. 		
  11. 		<div align="center" id="container">
  12. 		
  13. 		<div class="bg" id="bg">
  14. 			<ul>
  15. 				<li>进入相册</li>
  16. 				<li>删 除</li>
  17. 				<li>修 改</li>
  18. 				<li>****</li>
  19. 			</ul>
  20. 		</div>
  21. 		
  22. 		
  23. 		<h1 align="center">相册</h1>
  24. 		<div id="image" align="center">
  25. 		
  26. 			<div class="div1">
  27. 				<p class="p1">title1</p>
  28. 				<img data-original="./a.jpg" class='album lazy' title="描述" />
  29. 			</div>
  30. 			<div class="div1">
  31. 				<p class='p1'>title2</p>
  32. 				<img data-original="./a.jpg" class='album lazy' title="描述1" />
  33. 			</div>
  34. 			<div class="div1">
  35. 				<p class='p1'>title3</p>
  36. 				<img data-original="./a.jpg" class='album lazy' title="描述2" />
  37. 			</div>
  38. 			<div class="div1">
  39. 				<p class='p1'>title4</p>
  40. 				<img data-original="./a.jpg" class='album lazy' title="描述3" />
  41. 			</div>
  42. 			<div class="div1">
  43. 				<p class='p1'>title5</p>
  44. 				<img data-original="./a.jpg" class='album lazy' title="描述4" />
  45. 			</div>
  46. 			<div class="div1">
  47. 				<p class='p1'>title6</p>
  48. 				<img data-original="./a.jpg" class='album lazy' title="描述5" />
  49. 			</div>
  50. 			<div class="div1">
  51. 				<p class='p1'>title7</p>
  52. 				<img data-original="./a.jpg" class='album lazy' title="描述6" />
  53. 			</div>
  54. 			<div class="div1">
  55. 				<p class="p1">title8</p>
  56. 				<img data-original="./a.jpg" class='album lazy' title="描述7" />
  57. 			</div>
  58. 			<div class="div1">
  59. 				<p class='p1'>title9</p>
  60. 				<img data-original="./a.jpg" class='album lazy' title="描述8" />
  61. 			</div>
  62. 		</div>
  63. 		
  64. 		<button class="button1" id="button1">添加新相册</button>
  65. 		
  66. 		</div>
  67. 		
  68. 		
  70. 		
  71. 	</body>
  72. </html>
需要的js

注意：你必须给图片设置一个height和width，或者在CSS中定义，否则可能会影响到图片的显示

需要的jquery-3.4.1.js

链接：https://pan.baidu.com/s/1WwJNXa9-5csYVxG8vyghmA
提取码：1234

需要的 lazyload.js

链接：https://pan.baidu.com/s/1_118DY8mIDUhJs8dsq5JGg
提取码：1234

实现懒加载js代码

将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如：lazyload，方便js调用。

  1. <img class="lazy" alt="" width="1000" height="60" data-original="//images.h-ui.net/www/AD-1000x60.gif" />
  1. <script src="./jquery-3.4.1.js"></script>
  2. 				<!-- 图片的延迟加载 -->
  3. 				<script src="./lazyload.js"></script>
  4. 				<script>
  5. 					
  6. 					
  7. 					$(function(){
  8. 						// 启动 延迟加载
  9. 						$("img.lazy").lazyload({
  10. 						  placeholder : "./1.gif", //用图片提前占位
  11. 						    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  12. 						  effect: "fadeIn", // 载入使用何种效果
  13. 						    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  14. 						  threshold: 200, // 提前开始加载
  15. 						    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  16. 						  container: $("#container"),  // 对某容器中的图片实现效果 就是最外层的div 设置id 为 container就行了 
  17. 						    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  18. 						  failurelimit : 10 // 图片排序混乱时
  19. 						     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
  20. 						}).removeClass("lazy");
  21. 					})
  22. 					
  23. 				</script>

这里有 如果使用 ajax 请求 来评价的图片 那么 需要将上面的代码 放入 ajax里才能 有效

还有就是 首页会有多个ajax 请求，所以要在每次ajax请求接口，渲染模板后都重调用 延迟加载

为了防止重复渲染 使用 .removeClass(“lazy”); 将 指定的 lazy 属性删除 这样就只会 渲染一次

当然 如果 你在其他的地方 还需要 此lazy 属性 那么就不要删除此属性

预加载

1.什么是预加载

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

2.为什么要用预加载

在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。

否则，如果一个页面的内容过于庞大， 页面加载是从上到下加载的 此刻你翻到后面 那么页面图片 都是白色的 我们可以使用预加载提前加载好这些图片

3.案例

需要的html
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  7. 		<style> #image { margin: 0 auto; padding: 10px; width: 80%; border: 1px salmon solid; /*开启弹性布局*/ display: flex; /*wrap：换行，第一行在上方。*/ flex-wrap: wrap; /*或者使用 两端对齐，项目之间的间隔都相等。*/ justify-content: space-between; } .album { width: 150px; height: 150px; box-shadow: 1px 1px 5px silver; border-radius: 10px; animation: key1 3s infinite forwards alternate; } @keyframes key1 { 0% {} 20% { transform: translate(0px, -13px); } 40% { transform: translate(0px, 15px); } 100% { transform: translate(0px, 0px); } } .album:hover { animation: key 0.5s; } @keyframes key { 0% {} 100% { transform: scale(1.2); } } .p1 { animation: key 4s infinite forwards alternate; font-size: 18; font-weight: bold; color: salmon; box-shadow: 1px 1px 5px silver; border-radius: 10px; width: 150px; border: 1px salmon solid; margin-top: 10px; margin-bottom: 15px; } .div1 { margin: 15px; } .button1 { width: 100px; height: 40px; background-color: #FA8072; border: 1px sandybrown solid; box-shadow: 1px 1px 5px silver; border-radius: 10px; } .button1:hover { transform: scale(1.2); transition: all 0.5s ease-in-out; background-color: antiquewhite; cursor: pointer; } * { margin: 0; padding: 0; } .bg { background-color: #f4f5f9; width: 100px; border: 1px solid darkgray; display: none; position: absolute; box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .2); z-index: 1000; } .bg ul { list-style-type: none; text-align: center; line-height: 40px; } .bg li:hover { cursor: pointer; background: #eee; color: #CC1A1A; } </style>
  8. 	</head>
  9. 	<body>
  11. 		<div align="center" id="container">
  13. 			<div class="bg" id="bg">
  14. 				<ul>
  15. 					<li>进入相册</li>
  16. 					<li>删 除</li>
  17. 					<li>修 改</li>
  18. 					<li>****</li>
  19. 				</ul>
  20. 			</div>
  22. 			<h1 align="center">相册</h1>
  23. 			<div id="image" align="center">
  25. 				<div class="div1">
  26. 					<p class="p1">title1</p>
  27. 					<img src="" class='album ' title="描述" />
  28. 				</div>
  29. 				<div class="div1">
  30. 					<p class='p1'>title2</p>
  31. 					<img src="" class='album ' title="描述1" />
  32. 				</div>
  33. 				<div class="div1">
  34. 					<p class='p1'>title3</p>
  35. 					<img src="" class='album ' title="描述2" />
  36. 				</div>
  37. 				<div class="div1">
  38. 					<p class='p1'>title4</p>
  39. 					<img src="" class='album ' title="描述3" />
  40. 				</div>
  41. 				<div class="div1">
  42. 					<p class='p1'>title5</p>
  43. 					<img src="" class='album ' title="描述4" />
  44. 				</div>
  45. 				<div class="div1">
  46. 					<p class='p1'>title6</p>
  47. 					<img src="" class='album ' title="描述5" />
  48. 				</div>
  49. 				<div class="div1">
  50. 					<p class='p1'>title7</p>
  51. 					<img src="" class='album ' title="描述6" />
  52. 				</div>
  53. 				<div class="div1">
  54. 					<p class="p1">title8</p>
  55. 					<img src="" class='album ' title="描述7" />
  56. 				</div>
  57. 				<div class="div1">
  58. 					<p class='p1'>title9</p>
  59. 					<img src="" class='album ' title="描述8" />
  60. 				</div>
  61. 			</div>
  63. 			<button class="button1" id="button1">添加新相册</button>
  65. 		</div>
  67. 	</body>
  68. </html>
需要的js

需要的jquery-3.4.1.js

链接：https://pan.baidu.com/s/1WwJNXa9-5csYVxG8vyghmA
提取码：1234

yujiaz.js

链接：https://pan.baidu.com/s/15M1TTtXemMCNtjm2zSeNGA
提取码：1234

实现预加载js代码
  1. <script src="./jquery-3.4.1.js"></script>
  2. 		<!-- 图片的延迟加载 -->
  3. 		<script src="./yujiaz.js"></script>
  4. 		<script>
  5. 			var imgs = ["./1.gif", "./a.jpg"];
  7. 			$.preload(imgs, { // imgs: 图片数组或字符串 ['1.jgp', '2.jpg'] 或者 '1.jpg'
  8. 				order: 'ordered', // 默认无序加载
  9. 				each: function(count) {
  10. 					// 单个图片加载完成
  11. 				},
  12. 				all: function() {
  13. 					// 所有图片加载完成
  14. 					console.log("所有图片加载完成")
  15. 					
  16. 					//方式1
  17. 					
  18. 					// for (var i = 0; i < imgs.length; i++) {
  20. 					// var str = "<div class='div1'> \
  21. 					// <p class='p1'> Title" +i + "</p> \
  22. 					// <img src=" + imgs[i] +" class='album ' width='100' height='100' /> \
  23. 					// </div>"
  25. 					// $("#image").append(str)
  26. 					// }
  28. 				//方式1
  29. 					//index是下标 , element是对象
  30. 					$(".album").each(function(index, element) {
  32. 						$(element).attr("src", imgs[0])
  34. 					})
  36. 				}
  37. 			});
  38. 		</script>

自己感受下 效果就能发现 所有的 图片是同时加载好的 而不是一张一张的加载

懒加载与预加载的对比

懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

区别：

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

懒加载意义：

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

预加载意义:

预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

什么时候使用懒加载 什么时候使用预加载呢?

当页面图片特别多的时候 而且页面也特别长 比如京东 淘宝 这些 主页 图片少说都几千张 如果 你全部都加载完 那么等的花都谢了

这时候可以使用懒加载来 只加载可视图 或者靠近可视区的图片 这样就大大的加快了 访问的速度

当页面图片不是特别多 的时候 为了用户的体验效果 我们可以使用预加载 比如 从淘宝进入到店铺里看某件商品介绍的时候 切换的过程中就把 该介绍页面的所有图片都加载完成了 进去后无需等待

总结: 当前页面图片特别多的话 就使用懒加载 图片不是很多的话就使用预加载

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_45203607/article/details/120247957

内容来源于网络，如有侵权，请联系作者删除！

jqueryHtml前端html5css3

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com