码迷,mamicode.com
首页 > Web开发 > 详细

基于jQuery的图片异步加载和预加载实例

时间:2014-12-31 14:21:46      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用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="image/grey.gif" />;
                } else {
                    imgArr += <img class="scrollLoading" data-url="image/13.jpg" src="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的图片异步加载和预加载实例

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4195567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!