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


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 相关文章推荐
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
Element中Slider滑块的具体使用
Jul 29 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中怎样防止SQL注入分析
2014/10/23 PHP
php以post形式发送xml的方法
2014/11/04 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
爱护公共设施的标语
2014/06/24 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
创业计划书之农家乐
2019/10/09 职场文书
Docker下安装Oracle19c
2022/04/13 Servers
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android