移动端懒加载

最新推荐文章于 2023-02-01 20:56:44 发布

weixin_44134551

最新推荐文章于 2023-02-01 20:56:44 发布

阅读量154

点赞数

分类专栏： lazyload 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44134551/article/details/115205783

版权

lazyload 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动端懒加载</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<!-- src为加载中gif  data-original为数据库图片-->
		<!-- <img src="load.jpg" data-original="img/example.jpg" /> -->
		<div class="content"></div>
		<script src="js/jquery-1.11.2.min.js"></script>
		<script src="js/lazyload.min.js"></script>
		<script>
			$(function() {
				var pages = 1; //请求ajax页数
				var sizes = 8; //一次请求几条数据
				fImgLoad(pages);
				$(window).scroll(function() {
					//滚动的距离
					var scrollTop = $(window).scrollTop();
					//可使区域高度
					var winHeight = $(window).height();
					//文档页面高度
					var tatalHeight = $(document).height();
					//即滑到底部触发ajax
					if (scrollTop + winHeight >= tatalHeight ) {
						fImgLoad(pages++);
					}
				})
			})

			function fImgLoad(pages) {
				$.ajax({
					url: url,
					data: {
						page: pages,
						size: sizes
					},
					success: function(data) {
						var data = data.arr;
						$.each(data, function(index, item) {
							$('.content').append('<li><img data-original='+ item.src +' class="lazyload" /></li>');
						})
						//懒加载
						$('.lazyload').lazyload();
					}
				})
			}
		</script>
	</body>
</html>

weixin_44134551

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端懒加载

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>移动端懒加载</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head&gt
复制链接

扫一扫