使用jquery.lazyload实现图片懒加载

       在前端网页加载中,常用到的一项技术就是图片懒加载技术,用以减少页面加载时请求的文件数量太多造成网页较大,加载缓慢;

        懒加载的实现原理为在获取到图片所在位置后,对尚未出现在用户事视野中的图片先不进行服务器请求,而是将路径存储在data-original属性中,在图片即将被用户浏览,或在自定义设置距离屏幕底部还有某段距离时开始请求服务器,而后浏览器开始渲染图片;从而先加载用户率先看到的图片,提高网页加载速度;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>君凯商联网</title>
</head>
<body>
	<img class="lazy" data-original="img/qiqiu.png" width="400" height="400">
	<script src="js/jquery.js"></script>
	<script src="js/jquery.lazyload.js"></script>
	<script>
		$(function () {
			//threshold:距顶部参数值时开始加载图片;  placeholder:与input 中的placeholder效果基本一致,图片无值时显示的占位图片
            $("img.lazy").lazyload({ threshold: 200, placeholder: "loader.gif" });
       });
	</script>
</body>
</html>
                                                                                                                        君凯商联网 - Alex.Ma
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页