网页前端优化之滚动延时加载图片示例


Posted in Javascript onJuly 13, 2013

为什么要延时加载呢?页面加载的时候就显示全部的图片不就得了?有必要多此一举吗?答案是肯定的。当要加载的图片或者内容很多时,如果一次性加载完毕,那么整个页面将会加载很久,意味着要用户等待很久,这是对用户不友好的。或许你还会问,那不就做个分页不就得了?其实这种滚动延时加载的技巧正是用来代替手动点击下一页的分页技术。每换一页都要用户点击一次,这也是对用户不友好的。所以才有了滚动延时加载。

我这里把加载图片作为例子,就好像百度图片里的一样,你往下滚动,它就会继续显示下一页的图片。

要求是这样的,比如我要加载20张图片,在页面加载完毕后我先加载5张(前提是5张已经占满浏览器窗口高度),当滚动条滚动到浏览器底部的时候再加载5张,一共加载4次。

原理是这样的,先获取当前浏览器的窗口高度a,然后给页面绑定一个滚动条滚动事件,当滚动条滚动的时候,首先判断时候已经加载了20张,如果小于20张,再获取当前文档距离顶部的高度b以及图片内容的高度c,如果a+b>=c,继续加载5张图片。

我说过,我喜欢以尽可能少的代码以及尽可能简单的demo来为有需要的人展示一些强大的功能,因为所有的东西原理其实都很简单,越简单的demo越容易让人理解和接受。所以代码很少,直接上代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>页面滚动延迟加载图片</title>
    <style type="text/css">
        body {
            margin: 0px;
        }
        ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        var n = 0;
        var winHeight = $(window).height();
        $(function () {
            loadimg();
            $(window).scroll(function () {
                if (n < 20) {
                    var docTop = $(document).scrollTop();
                    var contentHeight = $("#content").height();
                    if (docTop + winHeight >= contentHeight - 10) {
                        loadimg();
                    }
                }
            });
        });
        function loadimg() {
            for (i = 0; i < 5; i++) {
                $("#content").append("<li><img src='1.jpg'/></li>");
            }
            n += 5;
        }
    </script>
</head>
<body>
    <ul id="content">
    </ul>
</body>
</html>

这里使用了jqury框架是为了让代码更少更简单,如果你可以手写纯js代码来实现这个功能当然最好不过,毕竟是优化,这个小小的功能也不需要使用到任何js框架。不过个人比较喜欢jquery框架,毕竟在大项目中,手写纯js代码将会严重拖慢整个项目的进度,有一个强大的js框架摆在面前,合理运用还是能提高开发效率的,而且在一个大项目中,jquery不是仅仅能帮你实现这个小小的功能而已,像Ajax,它是能轻轻松松就能帮你搞定的。另外我这里只是写死了加载这一张图片,事实上它应该是使用Ajax来请求新的图片,然后加载到页面里的,因为想尽量简单,就没有涉及后台逻辑,所以只加载这一张图片。

你可能会注意到这句代码:docTop + winHeight >= contentHeight - 10,这里我为什么要-10呢?如果不-10在IE、Firefox下测试时通过的,但是在Chrome下就不行了,因为在Chrome下,docTop + winHeight是永远比contentHeight小1的,而在前两个浏览器里,docTop + winHeight是比contentHeight大1的,这个是浏览器的问题,我们只能去兼容它们,最简单的方法就是不一定要滚动到底部,滚动到距离底部还有10个像素的时候就可以加载新的图片了。

需要源工程代码?

Javascript 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
Javascript实现单选框效果
Dec 09 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 #Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 #Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 #Javascript
jquery 滚动条事件简单实例
Jul 12 #Javascript
简约JS日历控件 实例代码
Jul 12 #Javascript
javascript中自定义对象的属性方法分享
Jul 12 #Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 #Javascript
You might like
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python学习思维导图(必看篇)
2017/06/26 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
微信公众号token验证失败解决方案
2019/07/22 Python
python函数不定长参数使用方法解析
2019/12/14 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
如何在pycharm中安装第三方包
2020/10/27 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
2014个人年度工作总结范文
2014/12/24 职场文书
运动会通讯稿600字
2015/07/20 职场文书
高三教师工作总结2015
2015/07/21 职场文书