您的位置：首页 > Web前端 > JQuery

图片延迟加载jquery插件imgLazyLoading

2015-03-18 15:23 495 查看

实现了图片延迟加载功能，插件代码非常简洁，且每个功能都把注释写得非常详细，适合网友们学习，好好利用哦

引入图片延迟加载Jquery插件文件后，页面使用代码如下：

<script type="text/javascript" charset="utf-8">
$(".lazyLoading").imgLazyLoading({
// 记录图片真实地址的属性名
url : "data-url",
// 图片渐出效果以及渐出时间
fadeIn : 400
});
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>网友猎人分享原创图片延迟加载jquery插件</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>')
</script>
<script type="text/javascript" src="imglazyloading.js"></script>
</head>
<body>
<div style="height:800px;width:700px; text-align:center; font-size:20px; font-weight:bold; margin:30px auto; color:#FF0000;">鼠标往下滚动就可以看到效果啦</div>
<img  data-url="images/11235MW1-4.jpg" class="lazyLoading"/>
<img  data-url="images/11235L447-3.jpg" class="lazyLoading"/>
<img  data-url="images/11235L305-1.jpg" class="lazyLoading"/>
<img  data-url="images/11235K258-0.jpg" class="lazyLoading"/>
<script type="text/javascript" charset="utf-8">
$(".lazyLoading").imgLazyLoading({
// 记录图片真实地址的属性名
url : "data-url",
// 图片渐出效果以及渐出时间
fadeIn : 4000
});
</script>
</body>
</html>

HTML

转自：http://www.jq----school.com/Detail.aspx?id=282

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航