js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
一、总结
一句话总结：图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是：懒加载的基础上面加上了动画效果，比如fade
使用的话简单到爆，倒是没有什么好说。
二、图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
百度盘下载地址：
链接：https://pan.baidu.com/s/1TiZ2u6itIj4q9gVVpwQ5tg 密码：ceko
1、截图
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./amazeui.min.css">
<script src="./jquery.min.js"></script>
<script src="./amazeui.min.js"></script>
<script src="./echo.js"></script>
</head>
<body>
<div>
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
<img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">
</div>
</body>
<!-- <script>
echo.init({
offset: 100,
throttle: 250,
unload: false,
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
}); // echo.render(); is also available for non-scroll callbacks
</script> --> <script>
echo.init({
callback: function(element, op) {
if (op === 'load') {
$(element).scrollspy({animation:'fade'});
}
console.log(element, 'has been', op + 'ed')
}
});
</script>
</html>
代码的效果就是懒加载的基础上面加上了fade的效果，也就是动画的效果