首页 > 代码库 > 基于jQuery的图片异步加载和预加载实例
基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片，比如相册列表，那么如果一次性读取图片将会瞬间加重服务器的负担，所以我们用jQuery来实现图片的异步加载和预加载功能，这样在页面的可视范围内才会加载图片，当拖动页面至可视界面时，其他图片才会加载，改插件很好地实现了图片异步加载功能。
在线预览 源码下载
html代码部分：
<div id="content"> <div id="button"> <ul> <li>小图</li> <li>中图</li> <li>大图</li> </ul> </div> <div id="image"> </div> </div> <script type="text/javascript"> $(function () { //把图片写入htm var imgArr = ""; for (var i = 1; i <= 25; i++) { if (i <= 25) {//因上传到17素材超过规定大小，不得不将过多的图片略去，为了达到更好的效果，可以自行修改此循环代码，并且增加其余图片，体验异步加载 imgArr += ‘<img class="scrollLoading" data-url="image/‘ + i + ‘.jpg" src="http://www.mamicode.com/image/grey.gif" />‘; } else { imgArr += ‘<img class="scrollLoading" data-url="image/13.jpg" src="http://www.mamicode.com/image/grey.gif" />‘; //超过26张后显示的图片 } } $("#image").append(imgArr); $("img").load(function () { //图片默认隐藏 $(this).hide(); //使用fadeIn特效 $(this).stop().fadeIn("5000"); }); // 异步加载图片，实现逐屏加载图片 $(".scrollLoading").scrollLoading(); ////以下代码为效果代码，非异步加载核心 //设置页面最外层容器的最小高度为屏幕的高度 $("#content").css({ "min-height": $(window).height() }); $("#button li:first-child").addClass("li_hover"); var index_button = 0; $("#button").on("click", "ul li", function () { index_button = $(this).index(); $("#button li").removeClass("li_hover"); $(this).addClass("li_hover"); if (index_button == 0) {//效果一 $("img").stop().animate({ "width": "225px", "height": "132px" }, 600); } else if (index_button == 1) {//效果二 $("img").stop().animate({ "width": "500px", "height": "294px" }, 600); } else {//效果三 $("img").stop().animate({ "width": "1050px", "height": "618px" }, 600); } }); $("#button li").hover(function () { $(this).addClass("li_hover"); }, function () { if (index_button != $(this).index()) { $(this).removeClass("li_hover"); } }); }); </script>
via:http://www.w2bc.com/Article/14496
基于jQuery的图片异步加载和预加载实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。