最简单的懒加载

最新推荐文章于 2021-10-06 17:32:24 发布
原创 最新推荐文章于 2021-10-06 17:32:24 发布 · 221 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#懒加载 #最简单的懒加载 #复制js就能用 

</head>
<style type="text/css">
	*{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.main{
		width: 750px;
		margin: 0 auto;
		background:greenyellow;
	}
	.main ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.main ul li{
		width: 50%;
		height: 300px;
	}
	.main ul li img{
		width: 100%;
		height: 300px;
		display: inline-block;
		border:  solid 1px #333333;
		background-size: cover;
	}
	@media only screen and (min-width: 100px) and (max-width: 640px) {
		.main{
		width: 100%;
		margin: 0 auto;
		background:greenyellow;
	}
	.main ul{
		display: block;
		
	}
	.main ul li{
		width:100%;
		
		
	}
	.main ul li img{
		width: 100%;
		display: inline-block;
		border:  solid 1px #333333;
		background-size: cover;
	}
	}
</style>
<body>
	<div class="main">
		<ul>
			<li id="container">
				<img class="lazy-load" data-original="img/0034034407155680_b.jpg" src="" alt="测试懒加载图片"/>
				<!--<noscript><img src="img/0034034407155680_b.jpg"></noscript>-->
			</li>
			<li id="container">
				<img class="lazy-load"  data-original= "img/23728116_23728116_1374722403973_mthumb.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original= "img/t010d0a0733b941dddd.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original= "img/t011389577c86566983.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t0120d77f037c8b137f.jpg" src="" alt="测试懒加载图片"/>
			</li id="container">
			<li>
				<img class="lazy-load" data-original="img/t01404cef74bd8870f7.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t0145ee840317c8d498.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t014b7283cfd901adeb.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t0162187af8c3180f9c.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01656c745efff606ad.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t016d2d2a2ac1ed672f.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t016d67ab92247547c8.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t017fbbd19f7ddcd517.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t019fbdfbf4b23ea9aa.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container"> 
				<img class="lazy-load" data-original="img/t01afb614e9535af103.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01c40b4cef7e908aef.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01c97e82f2439d3227.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01ca74aa3a83bcb35a.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01d47c384e30e15c0b.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01f73f7847f02fdb36.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01fed371cf840a3275.jpg" src="" alt="测试懒加载图片"/><!--original 额瑞特no-->
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01c97e82f2439d3227.jpg" src="" alt="测试懒加载图片"/>
			</li>
		</ul>
	</div>
	<div class="main">
		<ul>
			<li id="container">
				<img class="lazy-load" data-original="img/0034034407155680_b.jpg" src="" alt="测试懒加载图片"/>
				<!--<noscript><img src="img/0034034407155680_b.jpg"></noscript>-->
			</li>
			<li id="container">
				<img class="lazy-load"  data-original= "img/23728116_23728116_1374722403973_mthumb.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original= "img/t010d0a0733b941dddd.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original= "img/t011389577c86566983.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t0120d77f037c8b137f.jpg" src="" alt="测试懒加载图片"/>
			</li id="container">
			<li>
				<img class="lazy-load" data-original="img/t01404cef74bd8870f7.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t0145ee840317c8d498.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t014b7283cfd901adeb.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t0162187af8c3180f9c.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01656c745efff606ad.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t016d2d2a2ac1ed672f.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t016d67ab92247547c8.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t017fbbd19f7ddcd517.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t019fbdfbf4b23ea9aa.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container"> 
				<img class="lazy-load" data-original="img/t01afb614e9535af103.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01c40b4cef7e908aef.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01c97e82f2439d3227.jpg" src=""  alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01ca74aa3a83bcb35a.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01d47c384e30e15c0b.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01f73f7847f02fdb36.jpg" src="" alt="测试懒加载图片"/>
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01fed371cf840a3275.jpg" src="" alt="测试懒加载图片"/><!--original 额瑞特no-->
			</li>
			<li id="container">
				<img class="lazy-load" data-original="img/t01c97e82f2439d3227.jpg" src="" alt="测试懒加载图片"/>
			</li>
		</ul>
	</div>
	<script>
		var aImages = document.images;
		loadImg(aImages);
		window.onscroll = function(){
		    loadImg(aImages);
		};
		function loadImg(arr){
		    for( var i = 0,len = arr.length; i < len; i++){
		        if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
		            arr[i].isLoad = true;
		            arr[i].style.cssText = "transition: ''; opacity: 0;"
		            if(arr[i].dataset){
		                aftLoadImg(arr[i],arr[i].dataset.original);    
		            }else{
		                aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
		            }
		            (function(i){
		                setTimeout(function(){
		                    arr[i].style.cssText = "transition: 5s; opacity: 1;"
		                },16)
		            })(i);
		        }
		    }
		}
		function aftLoadImg(obj,url){
		    var oImg = new Image();
		    oImg.onload = function(){
		        obj.src = oImg.src;
		    }
		    oImg.src = url;
		}

本人前端小白，有不足之处各位大神多多指点，本文章经本人改编。

参考：http://www.jianxinfang520.com/lan/lan1.html

简单实现懒加载
hcn456的博客
06-03 173
MVP V层 package com.example.mvp.V; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.appcompat.ap
前端懒加载（简易版）
哒哒哒
12-14 844
懒加载 前端优化 图片加载
简单的图片懒加载实现
11-29
简单的图片懒加载实现
简单的懒加载实现
Android_jh的博客
07-26 202
public abstract class LazyFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.l...
菜鸟的懒加载函数
huangfengnt的博客
10-06 238
原生js写的图片懒加载函数。 html结构部分，pics2是占位图片 <ul> <li><img src="./pic2.jpg" alt="图片"></li> <li><img src="./pic2.jpg" alt="图片"></li> <li><img src="./pic2.jpg" alt="图片"></li>
layui图片懒加载.txt
08-30
### 图片懒加载技术在LayUI中的应用 #### 一、引言 在现代Web开发中，用户体验是至关重要的。对于包含大量图片的网站来说，优化页面加载速度显得尤为重要。图片懒加载（Lazy Loading）是一种提高网页性能的技术，...
js实现图片懒加载效果
10-19
图片懒加载是一种优化网站和移动应用性能的技术，目的是在网页或应用中仅加载当前可视区域内的图片，对于不在可视区域内的图片则延迟加载，这样可以减少首屏加载时间，提升用户体验，并且减少服务器的负载。...
最简便图片懒加载jxLazyload.zip
最新发布
11-23
在当今互联网高速发展的背景下，网页加载速度...而“最简便图片懒加载jxLazyload.zip”压缩包提供了一种简单、易于集成的懒加载实现方式，通过一段或几段JavaScript代码，使开发者能够轻松为自己的网站添加这项功能。
vue实现图片懒加载的方法分析
10-15
这种配置方式提供了一个最基本的图片懒加载环境，其中error和loading属性分别指定了加载失败和加载中时显示的图片。 扩展配置 对于需要更细粒度控制的场景，vue-lazyload插件提供了丰富的选项供开发者配置。以下是...
解析vue路由异步组件和懒加载案例
12-02
在大型项目中，为了提高应用的加载速度和用户体验，我们常常会使用到异步组件和懒加载策略。本篇文章将深入解析Vue路由中的异步组件和懒加载，并通过一个案例来展示它们的实现方式。 ### 1. 原理 **异步组件** 是...
前端的优化与JQuery懒加载
一个程序员的复习笔记
08-29 6120
做前端的时候，把实现不了的效果切换成图片还有一些图标也会切成图片，会降低前端页面展示的性能，增加页面资源HTTP的请求，甚至有的页面存在几十个img的http请求 。 1、降低图片的大小 首先我们目前常用的图片格式有png,gif,jpg等 是降低图片的大小kb，有很多方法可以做，压缩图片，选择更小kb的图片格式，以达到最优的显示效果 智图：一个图片优化平台 ...
原生JS实现最简单的图片懒加载
weixin_33725239的博客
08-19 730
原文地址：原生JS实现最简单的图片懒加载 欢迎star。 如果有错误的地方欢迎指正。 Demo地址：http://axuebin.com/lazyload 照片都是自己拍的哦~ 懒加载 什么是懒加载 懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时...
js手动实现简易懒加载----LazyLoad
你的博客
07-28 1107
前言 在网页加载中，对于一些存在很多Image的网页，一次加载所有图片，会造成性能浪费，图片优化的方法有很多，例如base64、雪碧图等，图片懒加载也是比较常见的一种性能优化的方法 原理 给页面中img标签设定自定义属性data-original,用来存放真正的img源URL，给所有img的src属性设定为一张静态图片或者不设置 监听窗口滚动scroll事件，遍历图片计算图片是否出现在浏览...
js原生实现高性能懒加载(分步解析)
weixin_40821790的博客
12-07 1万+
小弟不才,自己做了一个简单的懒加载,为了节约 window.onscroll的次数 ,提高性能, 设计了函数节流和函数防抖两种模式 , 后面想到更好的方法会更新,也请各位朋友多多指点!! :D 废话不多说,直接亮代码~~1.简单懒加载:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docu
超简单直观理解懒加载（Lazyload）
weixin_41966912的博客
03-15 2万+
懒加载什么是懒加载懒加载的作用简单的实现 什么是懒加载 懒加载，即延迟加载(Lazyload)。简单来说就是一个长页面中需要展示很多图像的时候，如果在进入页面的时候一次性把所有图片加载完，需要很长的时间。为了提升用户体验，我们使用懒加载，当图片出现在浏览器可视区域时，才加载图片。例如各种电商页面。 懒加载的作用 加快页面打开速度，提升用户体验 减少服务器压力和浏览器的负担 简单的实现 1、我们...
图片懒加载--判断div ul中的li是否已经滑动到可视区域里
weixin_30708329的博客
11-16 451
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-...
前端懒加载以及预加载
不破小子
12-06 8203
1.左侧宽度固定，右侧宽度不固定 .left{float:left;width:200px;} .right{overflow:auto;} 参考资料：史上最全布局
懒加载的原理及实现
热门推荐
Preeminent
01-13 6万+
懒加载的原理 原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。 代码实现 既然懒加载的原理是基于判断元素是否出现在窗口可视范围内，首
实现Fragment懒加载的完整示例教程
在介绍“fragment懒加载demo”相关知识点之前，我们首先要理解一些基础概念，然后结合这些概念对标题、描述和标签中的内容进行详细解释。 ### 基础概念 #### Fragment Fragment（片段）是Android平台上一种灵活地...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值