页面延时加载技术

绑定scroll事件 滚动条到达底部时 解除scroll事件 ajax加载数据 如果数据没全部载入 再次绑定scroll事件

绑定scroll事件 滚动条到达底部时 解除scroll事件 ajax加载数据 如果数据没全部载入 再次绑定scroll事件

$(document).ready(function() {
    $(window).bind("scroll", GetData);

    function GetData() {
        var windowHeight = $(window).height();
        var scrollHeight = $(document).scrollTop();
        var screenBottom = windowHeight + scrollHeight;
        var documentHeight = $(document).height();
        if (screenBottom >= documentHeight) {
            $(window).unbind();
            $.ajax({
                type: "post",
                url: "GetData.aspx",
                data: "action=data",
                success: function(data) {
                    data = eval("(" + data + ")");
                    if (data.ret = 1) {
                        var html = "";
                        for (var i = 0; i < 12; i++) {
                            html += ‘<div style=" border:1px solid; width:198px; float:left; height:200px" >‘ + i + ‘</div>‘;
                        }
                        $("#div_main").append(html);
                        $(window).bind("scroll", GetData);
                    }
                }
            })

        }
    }
});
时间: 2024-12-20 18:37:44

页面延时加载技术的相关文章

图片延时加载技术

同步延时加载页面延迟加载,即分屏显示,用户滚动页面,切换页面时显示当前屏幕的图片 原理:将img的地址暂时存在一个属性中,如data-original,而让src为空,等到鼠标滚动的时候,响应一个事件($(this).trigger('appear');),此时会把data-original中的地址取出来,放入src 1:引入jquery.lazyload.js,该js最好放在页面的最下面 2:给img添加延迟属性 如: <img class="lazy" src="/

js 的延时加载

最近,由于项目中引用到的脚本比较多,页面首次加载速度有些慢,于是进行了一些优化 用到的是延时加载技术,大概思路就是减少页面的<script>标签,并依靠lazyload.js延时加载相应的脚本文件. 首先,要先引用lazyload.js ,这是一个老外写的脚本,我放到了公司的图片服务器上,大家可以直接访问  http://img.fang.com/rent/image/rent/js/lazyload.js 实践之前,先来看一下它的使用文档 // Load a single JavaScrip

Image Lazy Load:那些延时加载图片的开源插件(jQuery)

图片延时加载技术对大流量的网站来说是十分实用的.目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源. unveil 这是一款十分轻量级的片时图片加载组件 支持现代浏览器及IE7+, Github上面有将近3K个star(关注) 使用 一般图片 <img src="bg.png" data-src="img1.jpg" /> 对于支持 retina (视网膜

JAVA的单例模式与延时加载

延迟加载(lazy load)是(也称为懒加载),也叫延迟实例化,延迟初始化等,主要表达的思想就是:把对象的创建延迟到使用的时候创建,而不是对象实例化的时候创建.延迟加载机制是为了避免一些无谓的性能开销而提出来的,这种方式避免了性能的浪费.所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作.可以简单理解为,只有在使用的时候,才会发出sql语句进行查询. 所谓延时加载技术,就是优化内存资源的利用效率,你要用什么,在用的时候再给你,而不是你迟点会用到的时候就马上给你. 当创建一个对象的子

前端技术-HTML页面的加载

HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输.http基于TCP建立的连接来收发数据,即实际应用上来的. 一个HTML页面的加载的交互流程大致如下: 0.输入URL1.解析URL2.构造并发送HTTP请求服务器的永久重定向响应(从 http://example.com 到 http://www.exam

FaceBook页面加载技术

1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒:同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表明,如果用户打开一个网站,等待3~4 秒还没有任何反应,他们会变得急躁,焦虑,抱怨,甚至关闭网页并且不再访问,这是非常糟糕的情况.所以,网页加载的速度十分重要,尤其对于拥有遍布全球的5亿用户的Facebook(全球最大的社交服务网站)这样的大型网站,有着大量并发请求.海量数据等客观情况,速度就成了必

一段实现页面上的图片延时加载的js

大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的. 实现原理 把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,

延时加载

一.为什么使用延迟加载技术: 1 避免浪费带宽 节约流量 2 减轻服务器的压力 带来更好的用户体验 当页面内图片达到一定的数量,页面的加载速度就越来越差. 我们并不需要把所有图片一次性加载完,而且,用户也不会一次性把所有图片看完. 所以,我们需要做的就是按需加载,只显示用户需要看的图片 图片惰性延迟加载好处 1. 按需加载图片,加快加载页面速度 2. 减少对服务器的请求数 3. 减少初始页面加载页面大小 图片惰性延迟加载坏处 1. SEO,因为图片都被替换成假的图片,所以会影响图片的收录,所以这

jquery插件图片延时加载实例详解(转)

jquery插件图片延时加载实例详解 效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="http://keleyi.com/