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

Jquery延迟加载实现

时间:2015-04-23 19:48:16      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

   //$(document).on("scroll", scrollcheck);
        //$(document).off("scroll", scrollcheck);
            //滚动条事件
            $(window).scroll(function () {
                //$(this).scrollTop() //滚动条当前高度
                //($(".imgdiv").offset().top 包含要加载图片div的高度
                //$("#loadimg").innerHeight() 加载图标自身高度
                //$(this).height() 浏览器可见高度
                if ($(this).scrollTop() > ($(".imgdiv").offset().top + $("#loadimg").innerHeight() - $(this).height())) {
                    //可以ajax请求放在这里... 获得数据后绑定到标签再隐藏加载图标
                    //$.getJSON("/main/...", {}, function () {
  
                    //})

          
            用定时模拟延迟加载,(数据获得和绑定应放在ajax中) var i = 3; var set = setInterval(function () { i--; if (i < 0) { $("#loadimg").css("display", "none"); $(".imgs").css("display", "block"); clearInterval(set); } else { } }, 1000); } }); <div style="height: 900px; height: 1500px;"> </div> <div class="imgdiv"> <img id="loadimg" src="dc64abc4c8b1956d0487bda279f87845.gif" /> <div class="showimg"> <img class="imgs" src="QQ图片20150422125945.png" style="display: none;" /> </div> </div> <div style="height: 900px; height: 1500px;"> </div>

 

Jquery延迟加载实现

标签:

原文地址:http://www.cnblogs.com/jiangshuilang/p/4451360.html

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