共计 1225 个字符，预计需要花费 4 分钟才能阅读完成。
今天想对项目中做一些优化，做一个图懒加载，我用的是 jquery.lazyload.js，网址：http://www.jq22.com/jquery-in…。
给的案例是针对 img，然后我猜测能否在背景图也能够实现，粗略的看了一下源码，好像是有这个功能的：
我把自己测试的代码贴出来，包括 img 和背景图（js 和图片需要自己引入）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lazy Load Enabled</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<style>
.lazy {
width: 50%;
height: 500px;
}
.bgs {
width: 50%;
height: 500px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<img class="lazy" data-original="img/1.jpg">
<img class="lazy" data-original="img/2.jpg">
<img class="lazy" data-original="img/3.jpg">
<img class="lazy" data-original="img/4.jpg">
<img class="lazy" data-original="img/5.jpg">
<img class="lazy" data-original="img/6.jpg">
<!-- 背景图也可以 -->
<div class="lazy bgs" data-original="img/placeholder.png"></div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>
<script type="text/javascript" charset="utf-8">
$(function() {$(".lazy").lazyload({
// 用图片提前占位
placeholder : "img/placeholder.png",
// 载入使用何种效果
effect: "fadeIn",
});
});
</script>
</body>
</html>
这个插件的配置 http://www.jq22.com/jquery-in…，这里有的。
这篇文章很简单，我写的目的就是为了测试背景图是否可以用。
但是这个插件无论是是用 img 还是背景图都宽高都是需要写上去的，写在行内还是 style 样式里面都可以，这对页面响应不是很友好，我不知道有没有朋友解决这种问题，如果有的话也可以分享一下。
正文完
发表至： javascript
2019-08-11
