用 jquery
制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示的流量,加快页面第一屏显示的速度。
主要原理:通过 setInterval 定时事件,检测滚动条的位置,再进行 ajax 请求服务端数据,加载图片到页面上。
现有 淘宝商城,3366等网站都有应用。
主要演示代码如下:
- <script type="text/javascript">
- var iHeight = 0;
- var iTop = 0;
- var clientHeight = 0;
- var iIntervalId = null;
- var itemsSize = 0;
- var pageNo = 1; // 当前页数,默认设为第 1 页
- var pageSize = 4; // 每页显示的数量
- getPageHeight();
- // 添加定时检测事件,每2秒检测一次
- iIntervalId = setInterval("_onScroll();", 2000);
- // 取得当前页面显示所占用的高度
- function getPageHeight() {
- if(document.body.clientHeight && document.documentElement.clientHeight) {
- clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
- } else {
- clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
- }
- iHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
- }
- // 调用ajax取服务端数据
- function show() {
- pageNo++;
- $.ajax({
- url: 'img.php?p='+pageNo+'&r='+Math.random(),
- type: 'GET',
- dataType: 'text',
- timeout: 4000,
- beforeSend: showLoadingImg,
- error: showFailure,
- success: showResponse
- });
- }
- function showLoadingImg() {
- $('#showmore').html('<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />显示更多结果</a>');
- }
- function showFailure() {
- $('#showmore').html('<font color=red> 获取查询数据出错 </font>');
- }
- // 根据ajax取出来的json数据转换成html
- function showResponse(responseData) {
- var returnjson = eval("("+responseData+")");
- itemsSize = returnjson.items.length;
- var nextpagehtml = '';
- var pageOffset = (pageNo-1)*pageSize + 1;
- for(i=0; i<itemsSize; i++) {
- nextpagehtml += '<ul class="item">';
- nextpagehtml += '<li class="i_thumb"><a href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'"><img src="'+ returnjson.items[i].pic +'" alt="'+ returnjson.items[i].name +'" /></a></li>';
- nextpagehtml += '<li class="i_title"><span class="order">'+ (pageOffset + i) +'</span><a href="http://www.xuekaifa.com" target="_blank" title="'+ returnjson.items[i].name +'">'+ returnjson.items[i].name +'</a></li>';
- nextpagehtml += '</ul>';
- }
- nextpagehtml += '<div class="clear"></div>';
- $('#items').html($('#items').html() + nextpagehtml);
- // 当前页码数小于3页时继续显示更多提示框
- if(pageNo < 3) {
- $('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');
- } else {
- clearInterval(iIntervalId);
- $('#showmore').hide();
- }
- }
- // 判断滚动条是否到达底部
- function reachBottom() {
- var scrollTop = 0;
- if(document.documentElement && document.documentElement.scrollTop) {
- scrollTop = document.documentElement.scrollTop;
- } else if (document.body) {
- scrollTop = document.body.scrollTop;
- }
- if((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) {
- return true;
- } else {
- return false;
- }
- }
- // 检测事件,检测滚动条是否接近或到达页面的底部区域,0.99是为了更接近底部时
- function _onScroll() {
- iTop = document.documentElement.scrollTop + document.body.scrollTop;
- getPageHeight();
- if(((iTop+clientHeight)>parseInt(iHeight*0.99))||reachBottom()) {
- if(pageNo >= 3) {
- clearInterval(iIntervalId);
- $('#showmore').hide();
- return;
- }
- show();
- }
- };
- </script>