js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

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、截图

js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

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的效果,也就是动画的效果

 
上一篇:CSS3学习总结——实现瀑布流布局与无限加载图片相册


下一篇:图片懒加载 echo.js