懒加载2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>懒人原生点击按钮加载更多(懒加载，每次加载N个)</title>
    <style>
    *{margin: 0;padding:0;list-style: none;}
    body{background: #333;font-size: 14px;font-family:"微软雅黑"}
    a{color: #333;text-decoration: none;}
    .hidden{ display: none;}
    .lanren{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
    .lanren ul.list{overflow: hidden;}
    .lanren ul.list li{width: 150px;height: 150px;margin:5px;float: left;overflow: hidden;}
    .lanren ul.list li img{width: 100%;height: 100%;}
    .lanren ul.list p{text-align: center;padding: 10px;}
    .lanren .more{overflow: hidden;padding:10px;text-align: center;}
    .lanren .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;}
    .lanren .more a:hover{text-decoration: none;background: red;color: #fff;}
    </style>
</head>
<body>
    <!--代码部分begin-->
    <div class="lanren">
        <div class="hidden">
            <li><img src="images/1px.gif" realSrc="images/lanren01.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren02.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren03.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren04.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren05.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren06.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren07.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren08.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren09.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren10.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren11.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren12.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren13.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren14.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren15.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren16.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren17.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren18.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren19.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren20.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren21.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren22.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren23.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren24.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren25.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren26.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren27.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren28.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren29.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren30.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren31.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren32.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren33.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren34.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren35.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren36.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren37.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren38.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren39.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren40.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren41.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren42.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren43.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren44.jpg" width="150" height="150" /></li>
            <li><img src="images/1px.gif" realSrc="images/lanren45.jpg" width="150" height="150" /></li>
        </div>
        <ul class="list">数据加载中，请稍后...</ul>
        <div class="more"><a href="javascript:;" onClick="lanren.loadMore();">加载更多</a></div>
    </div>
    <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
    <script>
        var _content = []; //临时存储li循环内容
        var lanren = {
            _default:10, //默认显示图片个数
            _loading:5,  //每次点击按钮后加载的个数
            init:function(){
                var lis = $(".lanren .hidden li");
                $(".lanren ul.list").html("");
                for(var n=0;n<lanren._default;n++){
                    lis.eq(n).appendTo(".lanren ul.list");
                }
                $(".lanren ul.list img").each(function(){
                    $(this).attr(‘src‘,$(this).attr(‘realSrc‘));
                })
                for(var i=lanren._default;i<lis.length;i++){
                    _content.push(lis.eq(i));
                }
                $(".lanren .hidden").html("");
            },
            loadMore:function(){
                var mLis = $(".lanren ul.list li").length;
                for(var i =0;i<lanren._loading;i++){
                    var target = _content.shift();
                    if(!target){
                        $(‘.lanren .more‘).html("<p>全部加载完毕...</p>");
                        break;
                    }
                    $(".lanren ul.list").append(target);
                    $(".lanren ul.list img").eq(mLis+i).each(function(){
                        $(this).attr(‘src‘,$(this).attr(‘realSrc‘));
                    });
                }
            }
        }
        lanren.init();
    </script>
    <!--代码部分end-->
</body>
</html>

时间： 2024-10-09 06:50:07

懒加载2的相关文章

关于Hibernate中立即加载和懒加载的区别

当1表与2表之间有OneToMany(类似)关系时候, 对于1表的实体类,设置FetchType=EAGER时(也就是立即加载),取1表数据,对应2表的数据都会跟着一起加载,优点不用进行二次查询. 缺点是严重影响数据查询时间,查询速度慢. FetchType=LAZY(也就是懒加载),此时查询时间大大缩短,缺点是查询表1的数据时,查询不到2表的数据. 不会主动取查询2表的数据.

[javascript] view plain copy 懒加载(LazyLoad)一直是前端的优化方案之一.它的核心思想是:当用户想看页面某个区域时,再加载该区域的数据.这在一定程度上减轻了服务器端的压力,也加快了页面的呈现速度. 懒加载多用于图片,因为它属于流量的大头.最典型的懒加载实现方案是先将需要懒加载的图片的src隐藏掉,这样图片就不会下载,然后在图片需要呈现给用户时再加上src属性. 公司内部库的懒加载正是采用这种方案.它会遍历页面中所有的图片,将其src缓存起来后删除图片的src属

页面图片懒加载

一.页面滚动加载图片的理解当一个网页含有大量的图片的时候,往往在打开页面的加载的很慢,如现在的大型电商.新闻.微博等,如果一下加载整个网页的所有图片,那会是一个缓慢的过程,要想快速的浏览网页,我们这时候就需要用到了在滚动或滑动页面的时候加载图片的方法.即图片懒加载!!! 二.实现懒加载的思路当打开页面的时候,刚开始不给显示图片的位置放图片,等滚动或滑动到哪里的时候在获取图片.当然如果我们不给图片src中放图片,就会出现先找不到图片的提示,这样肯定是不行的. 所以我们在放图片的位置刚开始让一张

懒加载 lazy loading

懒加载:延迟加载,当程序启动时不加载资源,当程序需要这些资源时再去加载.需要的时候再加载的一种方式,能够减少内存的占用,效率高.其本质是重写get方法. 背景:由于ios内存有限,如果我们一次性将所有资源加载完毕将极大的消耗内存,降低程序运行效率.所以就要将一些比较大的资源,如音频,数据,图片等大资源进行懒加载,就需要先判断是否存在,如果不存在再创建实例化. 1 @property (nonatomic,

懒加载(延迟加载)之后,在使用数据过程中容易出现的bug

在UI中,使用懒加载,也就是延迟加载来加载数据的时候,总是会面临几个问题? 如:1. >为什么先创建NSArray属性? 2. >为什么重写NSArray的get方法? 3.>为什么要判断是否为空? 4.>为什么下方代码"//1"这里不用NSString stringWithFormat: 而"//2"这里要使用? 5.>同时"//2"这里为什么使用的是%ld 来作为占位符? 这些问题不搞懂,懒加载就很难通透, 代

懒加载的坑

先说如下东东: 比如我们申明这个鬼 @property (nonatomic, strong) NSArray *mineModelArray; 那么 _mineModelArray self.mineModelArray 这两个获取数组的原理是不一样的,(好多人都没注意这个) 第一个是就简单粗暴直接获取这个数组第二个是调用@property的get方法获取到的,因为这个get方法返回的就是当前数组的的类型即一个数组.大多数情况下两者一样的的. 但是:如果在懒加载里面就不要再用self.min

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载. 问题目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题.那么问题来了,依赖资源过多时怎么办? build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题

懒加载（延迟加载）

懒加载FatchType.LAZY也称为延迟加载,是Hibernate3关联关系对象默认的加载方式,所谓懒加载就是当在真正需要数据的时候,才真正执行数据加载操作.简单理解为,只有在使用的时候,才会发出sql语句进行查询.懒加载的有效期是在session打开的情况下,当session关闭后,会报异常.当调用load方法加载对象时,返回代理对象,等到真正用到对象的内容时才发出sql语句. 急加载FatchType.EAGER 也成为立即加载,时立即执行sql语句.在session没有关闭的之前,如果

hibernate中懒加载急加载的区别，get方法和load方的区别法

懒加载是hibernate中的关联关系对象的默认方式,懒加载也会先去查询对象然后获取对象的id, 当正真要对数据进行使用时才会正真写sql语句. 懒加载的有效加载期是在session打开的时候,所以在我们要使用到懒加载的时候必须要保持session的开启. 急加载就是直接用sql语句去访问数据库,但速度相对于懒加载更快. get()方法在执行时会立刻向数据库发出sql语句. load()方法和懒加载类似也是只有当真正使用该实体的属性时才会发出sql语句: 还有就是当数据库中查询不到东西时,方法会

vue 组件按需引用，vue-router懒加载，vue打包优化，加载动画

当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载. 我们要做的就是把路由对应的组件定义成异步组件 const Foo = resolve => { // require.ensure 是 Webpack 的特殊语法,用来设置 code-split