最近在做手机端,发现下拉刷新和上拉加载的jq控件很少而且自我感觉不好用,比如iscroll之类……

然后自己写了个懒加载的,也很简单,最基础的代码【不喜勿喷,但蛮实用的】

wap手机端懒加载分页:

用之前先引用下jquery.js

  var current = 1;
$(function() {
$('body').bind('touchmove', function(e) {
if($(this).scrollTop() > ($(window).height() * current - 150)) {//这里的150表示距离底部150像素触发,可自行调节
current++;
console.log("第" + current + "页");
//这里放你的分页代码
}
});
});
if($(this).scrollTop()==0){//这是wap刷新代码,有需要请结合使用}

web电脑端懒加载分页:

用之前先引用下jquery.js

 var current = 1;
$(function() {
window.onscroll = function() {
if($(document).scrollTop() >= ($(document).height() - $(window).height() - 150)) {//150与wap手机端一样
current++;
6 //这里放你的分页代码
}
}
});
if($(document).scrollTop()==0){//这是web刷新代码,有需要请结合使用}

web电脑端footer底部固定:
 .footer.position {
position: absolute;
bottom:;
}
 $(function() {
auto();
window.onresize = function() {
auto();
}
}); function auto() {
if($(window).height() > 917) {//917可自行调整,根据页面的内容高度
$(".footer").addClass("position");
} else {//.position见css
$(".footer").removeClass("position");
}
}

另一种方法【推荐】

       function auto() {
$("body").scrollTop(1); //控制滚动条下移1px
if($("body").scrollTop() > 0) {
$(".footer").removeClass("position");
alert("有滚动条");
} else {
$(".footer").addClass("position");
alert("没有滚动条");
}
$("body").scrollTop(0); //滚动条返回顶部
}

附上两张前后对比图,footer固定底部

												

懒加载实现的分页&&网站footer自适应的更多相关文章

  1. 抛砖引玉:探讨网站性能优化之Javascript异步懒加载技术

    懒加载技术是现在许多大型网站的都使用的提高网站性能的方式,它的核心思想是当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 其实国内很多网站都用 ...

  2. python爬虫之图片懒加载、selenium和phantomJS

    一.什么是图片懒加载 在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx"> ...

  3. js实现图片懒加载

    大型购物网站都会采用图片懒加载技术来优化网站首页打开速度,以提高用户体验,那么具体是怎么实现的呢,我们一探究竟. html结构(div包裹一层用来显示背景图片,等待图片加载完成后,显示真实图片) &l ...

  4. 数据解析,懒加载,代理ip

    在前面的requests流程中,还缺少了一步重要的流程,就是在持久化存储之前需要进行制定的数据解析.因为在大多数情况下,我们都会使用聚焦爬虫,也就是爬取页面中的指定部分数据值,而不是整个页面的数据. ...

  5. 带你认识网站图片img懒加载和预加载的区别

    懒加载 什么是懒加载? 懒加载也就是延迟加载.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览 ...

  6. 天猫首页迷思之-jquery实现整个div的懒加载(1)

    懒加载是众所周知的减少网页负载,提高性能的方法,不少大型用图片用的多的网站都用到了. 于是我网上一搜,得到一插件:jquery.lazyload    网址:http://www.appelsiini ...

  7. hexo next主题深度优化(二),懒加载。

    文章目录 tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面) 废话 背景 懒加载简单介绍 引入js 重点!敲黑板了!!! 完善懒加载函数 懒加载函数可配置的参数 正式在hex ...

  8. 懒加载session 无法打开 no session or session was closed 解决办法(完美解决)

           首先说明一下,hibernate的延迟加载特性(lazy).所谓的延迟加载就是当真正需要查询数据时才执行数据加载操作.因为hibernate当中支持实体对象,外键会与实体对象关联起来.如 ...

  9. 懒加载lazyload

    什么是懒加载 懒加载就是当你做滚动到页面某个位置,然后再显示当前位置的图片,这样做可以减少页面请求. 懒加载:主要目的是作为服务器前端的优化,减少请求数或延迟请求数,一些图片非常多的网站中非常有用,在 ...

随机推荐

  1. Interpolation particles In Katana

    I write the sphere radius interpolation for katana plugin that can transfer attributes,render attrib ...

  2. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  3. BeanUtils.copyProperties()方法和PropertyUtils.copyProperties()的区别

    首先两者来源于同一个包: import org.apache.commons.beanutils.BeanUtils; import org.apache.commons.beanutils.Prop ...

  4. 关于访问链接返回XML的获取数据

    1. 返回DataSet格式; /// <summary> /// 向某个url提交数据并读取该地址返回的xml,并将xml转换成dataset,并返回dataset中某个表 /// &l ...

  5. springMVC下集成active MQ发送邮件

    环境:本地需安装activemq,且访问正常,安装方法网上很多,这里省略. 1.添加相关jar包,我这里使用的是maven,你也可以选择其他方式添加.下面是maven相关配置: <!-- Act ...

  6. 《利用python进行数据分析》读书笔记--第七章 数据规整化:清理、转换、合并、重塑(三)

    http://www.cnblogs.com/batteryhp/p/5046433.html 5.示例:usda食品数据库 下面是一个具体的例子,书中最重要的就是例子. #-*- encoding: ...

  7. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  8. 平时一些mysql小技巧及常识

    >navicat premium 快捷键1.ctrl+q 打开查询窗口2.ctrl+/ 注释sql语句3.ctrl+shift +/ 解除注释4.ctrl+r 运行查询窗口的sql语句5.ctr ...

  9. 【转】如何查看当前Open的Cursor

    遇到错误:A cursor with thename ' ' already exists,想要看是什么代码导致的.找到下面几种方法. --测试声明Cursor并且打开 DECLARE vend_cu ...

  10. GOLANG SDK下载

    如果没有FQ的话是不能访问国外网站的,但是golang提供了中国站点,要下载sdk可以在中国站点下载 中国站点: http://www.golangtc.com/download