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


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 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
详解vuex状态管理模式
Nov 01 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
基于header的一些常用指令详解
2013/06/06 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
vue组件实例解析
2017/01/10 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
vue axios同步请求解决方案
2017/09/29 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
python 打印对象的所有属性值的方法
2016/09/11 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
数控专业毕业生求职信范文
2013/09/21 职场文书
硕士研究生自我鉴定
2013/11/08 职场文书
运动会领导邀请函
2014/02/05 职场文书
服务质量承诺书
2014/03/27 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
群众路线个人整改措施
2014/10/24 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书