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


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 相关文章推荐
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
jQuery实现穿梭框效果
Jan 19 jQuery
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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网上调查系统
2006/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
微信小程序实现换肤功能
2018/03/14 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python selenium 三种等待方式解读
2016/09/15 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python将数组n等分的实例
2019/12/02 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
师范生自荐信范文
2013/10/06 职场文书
工作人员思想汇报
2014/01/09 职场文书
挂牌仪式主持词
2014/03/20 职场文书
2014年服务员工作总结
2014/11/18 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
《包身工》教学反思
2016/02/23 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技