页面滚动加载

//1.页面滚动加载

$(document).ready(function () { //本人习惯这样写了
    $(window).scroll(function () {
        //$(window).scrollTop()这个方法是当前滚动条滚动的距离
        //$(window).height()获取当前窗体的高度
        //$(document).height()获取当前文档的高度
        var bot = 50; //bot是底部距离的高度
        if ((bot + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
           //当底部基本距离+滚动的高度〉=文档的高度-窗体的高度时;
            //我们需要去异步加载数据了
            $.getJSON("url", { page: "2" }, function (str) { alert(str); });
        }
    });
});

时间: 2024-08-08 17:48:20

页面滚动加载的相关文章

移动设备的HTML页面中图片实现滚动加载

如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时,要把页面加载完毕,可能就需要10s,20s甚至更多,严重影响用户的体验.针对这样的问题,让页面中的图片滚动加载(图片出现在显示器屏幕上时再加载图片)显得非常重要!这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题. 1.效果图.     这是加载过程中的图片菊花显示            

Ajax滚动加载页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>  <m

前端页面实现滚动加载数据的案例

1.我们在项目中经常会有这样的需求就是需要滚动加载数据: 2.原理利用分页的原理即可实现:见下面代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l

滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn"> <meta charset="utf-8" /> <title>滚动加载|jquery.endless-scroll插件|使用demo</title> <script type="text/javascript"

滚动加载服务器端内容——例子

网页代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>滚动加载</title> <style> * {margin:0; padding:0; border:0;} #container {width:960px; margin:auto;} #container:after {display:block; height:0

滚动加载图片

做了一个粗糙的滚动加载图片例子,先分享一下,后续不断完善. 基本功能是这样的: 1.页面一共有7层,每一层可以认为是不同类型的商品: 2,页面初始化时,只加载第一层的图片和数据等: 3,滚动时,动态加载图片:(一层一层的加载) 4,如果已经加载过的层,不再加载. 样式:     * {      margin: 0px;      padding: 0px;     } body { background: rgb(250, 222, 222); } .container { width: 95

前端设计师---优化页面的加载速度

一:从脚本入手的优化: 删除javascript中不必要的注释,简洁优化代码是必须养成的好习惯,尽量不要将函数的调用直接加在HTML标签中<div onclick="">这种用法不被提倡.尽量使用js动态添加,减少标签污染,提高代码的可复用性. 合并相似的js代码,或者可以直接封装成函数,既提高代码复用性,又省去加载脚本的时间. 引入JavaScript 编写的 jQuery 插件Lazy Load,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片不会被载入,直到用户

HTML5商城开发一 楼层滚动加载数据

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300) <div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;"> <ul clas

js滚动加载

背景 移动web开发中,为了加快响应速度,通常在服务端输出首屏页面,动态异步加载listview.而对于包含大量图片的listview,一起加载将耗费大量http请求,进而影响响应速度.滚动加载这时就可以成为一种可选的优化方案. 要点 生成的img标签用一个属性存储图片地址而不是用src document.images 获取当前img标签 isInSight: 是否有元素处于当前可视区域内 window.addEventListener('scroll', lazyLoad, false); 监