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


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 url传值中文乱码之解决之道
Nov 20 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP技术开发技巧分享
2010/03/23 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Django实现简单的分页功能
2021/02/22 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
什么是Rollback Segment
2013/04/22 面试题
行政部主管岗位职责
2013/12/28 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
刑事代理授权委托书
2014/09/17 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB