当前位置：首页 > news >正文

图片懒加载：基于jQuery判断某元素是否显示在可视范围内，并实现背景图片根据随机下标进行懒加载

news 来源：原创 2024/5/6 2:50:30

有时候用jq写页面功能的时候，可能需要判断某元素是否显示在可视范围内，再加载该元素中的图片等内容，那么怎么实现这个功能呢？

知识点一： 判断某元素是否显示在可视范围内

知识点二： 实现图片懒加载

知识点三： 随机下标的生成

效果图：

话不多说，下面直接上代码：

工具函数 util.js：

var util = {
    // 判断某元素是否显示在可视范围内
    isShow: function ($el) {
        var scroll_top = $(window).scrollTop(),
            window_height = $(window).height(),
            offset_top = $el.offset().top,
            height = $el.height();
        return $el.is(':visible') && scroll_top <= offset_top + height && scroll_top >= offset_top - window_height;
	},
	// 随机数
	randomNum: function(minNum, maxNum) {
			switch (arguments.length) {
				case 1:
					return parseInt(Math.random() * minNum + 1, 10);
			case 2:
				return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
			default:
				return 0;
		}
	},
	/**
     * 背景图的懒加载
     * @param {String} options.selector 选择器的名称，必须为类选择器
     * @param {String} options.error 图片加载失败显示内容，默认<i class="icon icon-lazy icon-lazy-error">暂无封面图</i>
     */
    lazyBackgroundImg: function(options) {
		var that = this,
			$lazys = $('.' + options.selector),
			delayTime = options.delayTime || 300,
			error = options.error || '<i class="icon icon-lazy icon-lazy-error">暂无封面图</i>',
			loadBgImg = function() {
				clearTimeout(y);
				if ($lazys.length) {
					var showLazys = [];
					for (var i = 0; i < $lazys.length; i++) {
						that.isShow($($lazys[i])) && showLazys.push(i);
					}
					if (showLazys.length) {
						var l = showLazys.length - 1,
							r = that.randomNum(0, l),
							i = showLazys[r],
							$el = $($lazys[i]),
							url = $el.attr('data-url'),
							$img = $('<img src="' + url + '"/>');
						$el.css('background', "url('" + url + "')");
						$img.error(function() {
							$el.append(error);
							$el.css('background', '');
						});
						$el.removeClass(options.selector);
						$lazys.splice(i, 1);
						var y = setTimeout(function() {
							loadBgImg();
						}, delayTime);
					}
				} else {
					$(window).off('scroll', delayScroll);
				}
			}
		if ($lazys.length) {
			loadBgImg();
			$(window).on('scroll', delayScroll);
			function delayScroll() {
				clearTimeout(d);
				var d = setTimeout(function() {
					loadBgImg();
				}, delayTime);
			}
		}
	}
}

示例 lazyBgImg.html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.imgBox {
				float: left;
				width: 200px;
				height: 200px;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div class="lazyBox">
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/ff0000"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/4682B4"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/F0FFF0"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FFDEAD"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/FF4500"></div>
			<div class="imgBox bg-lazy" data-url="https://via.placeholder.com/1000x200.png/A9A9A9"></div>
			<!-- 多复制点上面的代码看效果 -->
		</div>
		<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="util.js"></script>
		<script type="text/javascript">
			$(function() {
				util.lazyBackgroundImg({
					delayTime: 100,
					selector: 'bg-lazy'
				});
			});
		</script>
	</body>
</html>