懒加及thymeleaf

最新推荐文章于 2022-02-02 14:59:20 发布

zsl龙少

最新推荐文章于 2022-02-02 14:59:20 发布

阅读量651

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_45954445/article/details/107864332

前端专栏收录该内容

20 篇文章

订阅专栏

本文深入解析了懒加载技术的工作原理及实现方式，介绍了如何利用JavaScript动态设置图片路径，以达到按需加载的目的，从而减轻本地缓存压力。文章通过具体示例展示了如何判断图片是否进入可视区域，并在此基础上触发加载过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

懒加载

懒加载即按需加载，当页面需要时再加载处理，以减少本地缓存的压力。
懒加载的原理：页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的“data-src”的自定义属性里，要用的时候就取出来，再设置。
if语句原理图如下。当元素的offsetTop值小于可视区高度+滚动条滚动距离的和，表示元素进入到了可视区域。
在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片的懒加载</title>
</head>
<body>
      <style>
            *{ margin:0; padding: 0; list-style: none; }
            #list img{ width: 500px; height: 500px;}
        </style>
        <body>
    <ul id="list">
        <li><img data-src="./img/1.png" /></li>
        <li><img data-src="./img/2.png" /></li>
        <li><img data-src="./img/3.png" /></li>
        <li><img data-src="./img/4.png" /></li>
        <li><img data-src="./img/5.png" /></li>
        <li><img data-src="./img/6.png" /></li>
        <li><img data-src="./img/7.png" /></li>
        <li><img data-src="./img/8.png" /></li>
    </ul>
    <body>

	   <script>
	   			// 获取图片
	       var oImg = document.getElementsByTagName('img');
	         fn();           // 先让第一张图展现
	       window.onscroll = function(){
	           fn();				  // 滚轮滚动事件  
	       };
	       function fn(){
	           //判断图片是否在可视区内
	           for(var i=0; i<oImg.length; i++){
	               var oImgTo = oImg[i].offsetTop;
	               //元素距离页面顶端的距离
	               var clientH = document.documentElement.clientHeight;
	               //可视区的高度
	               var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
	               //可视区顶部距离页面顶部的距离
	               if(clientH + scrollT >= oImgTo){
	                   oImg[i].src = oImg[i].getAttribute('data-src');
	               }
	           }
	       }
	       //getAttribute() 方法根据名称取得属性值。
	   </script>
	</body>
	</html>

&thymeleaf

这里就需要data-自定义属性语法
格式：data-

<div th:attr="data-src=${./img/1.png}" >