菜单

网页前端优化之滚动延时加载图片示例,jquery滚动加载数据的方法

2019年8月2日 - 前端排行

为什么要延时加载呢?页面加载的时候就显示全部的图片不就得了?有必要多此一举吗?答案是肯定的。当要加载的图片或者内容很多时,如果一次性加载完毕,那么整个页面将会加载很久,意味着要用户等待很久,这是对用户不友好的。或许你还会问,那不就做个分页不就得了?其实这种滚动延时加载的技巧正是用来代替手动点击下一页的分页技术。每换一页都要用户点击一次,这也是对用户不友好的。所以才有了滚动延时加载。

本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下:

我这里把加载图片作为例子,就好像百度图片里的一样,你往下滚动,它就会继续显示下一页的图片。

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博、QQ空间等。

要求是这样的,比如我要加载20张图片,在页面加载完毕后我先加载5张(前提是5张已经占满浏览器窗口高度),当滚动条滚动到浏览器底部的时候再加载5张,一共加载4次。

代码如下:

原理是这样的,先获取当前浏览器的窗口高度a,然后给页面绑定一个滚动条滚动事件,当滚动条滚动的时候,首先判断时候已经加载了20张,如果小于20张,再获取当前文档距离顶部的高度b以及图片内容的高度c,如果a+b>=c,继续加载5张图片。

复制代码 代码如下:

我说过,我喜欢以尽可能少的代码以及尽可能简单的demo来为有需要的人展示一些强大的功能,因为所有的东西原理其实都很简单,越简单的demo越容易让人理解和接受。所以代码很少,直接上代码:

<!DOCTYPE=html>
<html>
<head>
<script src=”js/jquery.js”
type=”text/javascript”></script>
   <script type=”text/javascript”>
    $(document).ready(function(){
        var range = 50;             //距下边界长度/单位px
        var elemt = 500;           //插入元素高度/单位px
        var maxnum = 20;            //设置加载最多次数
        var num = 1;
        var totalheight = 0;
        var main = $(“#content”);                     //主体元素
        $(window).scroll(function(){
            var srollPos = $(window).scrollTop();   
//滚动条距顶部距离(页面超出窗口的高度)
            //console.log(“滚动条到顶部的垂直高度:
“+$(document).scrollTop());
            //console.log(“页面的文档高度 :”+$(document).height());
            //console.log(‘浏览器的高度:’+$(window).height());
            totalheight = parseFloat($(window).height()) +
parseFloat(srollPos);
            if(($(document).height()-range) <= totalheight  && num !=
maxnum) {
                main.append(“<div style=’border:1px solid
tomato;margin-top:20px;color:#ac”+(num%20)+(num%20)+”;height:”+elemt+”‘
>hello world”+srollPos+”—“+num+”</div>”);
                num++;
            }
        });
    });
    </script>
</head>
<body>
    <div id=”content” style=”height:960px”>
        <div id=”follow”>this is a scroll test;<br/>   
页面下拉自动加载内容</div>
        <div style=’border:1px solid
tomato;margin-top:20px;color:#ac1;height:800′ >hello world test
DIV</div>
    </div>
</body>
</html>

复制代码 代码如下:

希望本文所述对大家的jQuery程序设计有所帮助。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图