<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片延迟加载练习</title>
<script type="text/javascript" src="/loadimg/static/lazyload/jquery.js"></script>
<script type="text/javascript" src="/loadimg/static/jquery.lazyload.js"></script>
<!--这里有个稍微需要注意的地方就是在选择文件的时候建议下载原始的版本，网上有个修改版，我用的时候没有实现成功，换了原始版本一次就成功了（也可能是自己的问题）-->
</head>
<body>
<div id="imglist">
<img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
<img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
<img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
<img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
<img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
<img class="lazy" src="/loadimg/static/lazyload/grey.gif" data-original="/loadimg/static/lazyload/view1.png" width="640" heigh="480">
</div>
</body>
<script type="text/javascript">
$(document).ready(
function($){
$("img.lazy").lazyload({//根据实际情况加载以下参数
placeholder : "/loadimg/static/lazyload/grey.gif", //加载图片前的占位图片
effect : "fadeIn", //加载图片使用的效果(淡入)
threshold : 200, //提前开始加载，值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.
event : "click",//值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载
ontainer: $("#imglist"),//值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10//值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
});
</script>
</html>
转载于:https://www.cnblogs.com/siki/p/4409079.html
扫一扫
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
