Jquery延迟加载实现

   //$(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>
时间: 2024-10-09 07:51:54

Jquery延迟加载实现的相关文章

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动 页

jQuery延迟加载(懒加载)插件 jquery.lazyload.js

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. 如何使用: Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾,也就是</body>前: <

提取数据库字段里面的值,并改变+图片懒加载,jquery延迟加载

要求:手机端打开某个页面的详细信息,因为网速或者别的原因,响应太慢,因为图片大的原因,希望先进来,图片在网页运行的情况再慢慢加载(jquer延迟加载) http://www.w3cways.com/1765.html()  困难:因为页面的图片是用编辑器加进去的        :图片与文字存到数据库的字段中 :实现思路:从数据库中读取这个字段,把字段里面的src替换成lazyload 然后再返回给页面 这里主要讲是怎么把从数据库取到的数据里面的字段里面的值替换然后与页面直接的数据转换 首先 pu

jquery 延迟加载代码

<!--引入以下两个js文件--> <script type="text/javascript" src="./js/jquery.min.js"> </script> <script type="text/javascript" src="./js/jquery.lazyload.js"> </script> <!--初始化--> <script&

golang爬虫登录(四-进阶版)以及利用fiddler抓包

前几篇文章摸索了如何用golang模拟登录:对简单的情况,甚至可以用GET方式代替POST方式登录. 但现在想抓取公司泛微OA系统的网页,就遇到一些困难. 难点: 1.登录页POST提交后,会有http 302跳转.后来发现不是问题,因为用http.Client.Do会自动处理跳转. 2.网站使用了FrameSet,还有大量jquery动态生成加载内容,这个处理起来比较困难,链接也是JS生成,只能针对具体问题具体分析. 3.用chrome控制台抓到的header提交不成功,于是想到fiddler

javascript - 简单实现一个图片延迟加载的jQuery插件

最近在看一本书<Third-Party Javascript>很不错,推荐给大家,下载地址各位自己搜索了. 步骤: 1.打开google,鉴于google基本打不开,那么就打开这个网址吧.http://www.aol.com 2.搜索third party javascript filetype:pdf 一般都可以下载到电子书了.目前只有英文版. 这书中有一章讲到了提高app的效率,其中有一点就是延迟加载初始化不需要的资源,结合书中给出的部分代码,我这里简单的弄了一个jQuery的插件. 首先

图片延迟加载并等比缩放,一个简单的JQuery插件

使用方法: $(".viewArea img").zoom({height:74,width:103}); (function($){    $.fn.zoom = function(settings){                //一些默认配置:                settings = $.extend({                    height:0,                    width:0,                    load

jquery实现图片按需延迟加载原理

为什么我们需要图片按需加载? 网站中的图片可以使网站添加不少"色彩", 但大量的图片会使我们打开的速度下降, 但我们又不得不用这些图的时候, 我们可以变相的加载这些图片, 常见与一些列表页啊, 或者大数据的主页啊, 或者 "全是图" 的页面, 那么这个图片加载就显着重要了, 比如 jd,taobao啥的都在用, 所以说 你并不孤单! 数据显示通过按需加载图片可以大大的提高网站的打开速度! 1, 首先我们得改变这些图片的HTML结构, 把图片的 src 换成一个 &q