插件git地址: https://github.com/vvo/lazyload
<!DOCTYPE html>
<html>
<head>
<title>lazyload</title>
</head>
<body>
<script src="lazyload.min.js"></script>
<!-- A lot of content -->
<!-- A lot of content -->
<img
data-src="real/image/src.jpg"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
οnlοad="lzld(this)">
</body>
</html>
当屏幕滚动到指定位置,img图片的 src中的gif(加载中)图片会被图换成data-src中的目标图片。
注意点:
1. 第一行
<!DOCTYPE html>
这个要写,不然不会动态加载。
2. 如果你设置了 目标图片的长宽(目标图片尺寸不一定),这时候loadding的gif图 如果根据目标尺寸来显示的话,会被拉伸变形。可以采用以下方法来避免:
2.1准备一张透明的1*1的图片,作为img的src。
2.2 设置img的 background
.img-loadding {
background: rgb(237, 237, 237) url(../images/common/loadding.gif) center center no-repeat;
}