懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,

而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

比如,用户滚动到相应位置时,显示相应的图片,否则不加载!!!

下面是一个图片懒加载的示例.

这个html文件上含有许多div标签,一个div标签下要添加一个子标签img用来显示一个图片,如果页面载入时全部从服

务器端下载图片资源,无疑十分耗费时间,所以我们将采用图片懒加载的方式,使用户滚动到当前位置时才加载该位置的图

片。

首先,在html中我们要借助自定义属性data-src来保存图片的资源地址

即所有的要显示图片的div标签加上一个data-src属性

<div class="lazyDone" data-src="http://你的图片资源地址0"></div>
<div class="lazyDone" data-src="http://你的图片资源地址1"></div>
<div class="lazyDone" data-src="http://你的图片资源地址2"></div>
<div class="lazyDone" data-src="http://你的图片资源地址3"></div>
<div class="lazyDone" data-src="http://你的图片资源地址4"></div>
<div class="lazyDone" data-src="http://你的图片资源地址5"></div>
<div class="lazyDone" data-src="http://你的图片资源地址6"></div>
<div class="lazyDone" data-src="http://你的图片资源地址7"></div>
<div class="lazyDone" data-src="http://你的图片资源地址8"></div>
<div class="lazyDone" data-src="http://你的图片资源地址9"></div>

在我们的js中就可以进行处理,识别出这些带有data-src标签的div。然后计算该位置到页面顶部的距离,判断用户是否

滚动到该位置,如果达到则取出它的data-src的value,创建一个子标签img,将div的data-src的值赋值给img的src属性。

然后显示这个img标签,用户就可以在该位置看到相应的图片了。

function setImg($obj){
var src = $obj.getAttribute("data-src");
var img = document.createElement("img");
img.src = src;
if($obj.children.length == 0){
//第一次滚动到此位置时加载,之后资源已经下载,不用重复添加
$obj.appendChild(img);
}
}
//获得对象距离页面顶端的距离
function getHeight($obj) {
var h = $obj.offset().top;
return h;
} window.onscroll = function(){
var $div = $(".lazyDone");
for (var i = 0; i < $div.length; i++) {
var $odiv = $div[i];
//检查$odiv是否在可视区域
var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
var h = getHegiht($odiv);
if (h < t) {
setImg($odiv);
}
}
};

懒加载 lazy load的更多相关文章

  1. SAP Fiori里的List是如何做到懒加载Lazy load的

    今天一同事问我这个问题:S/4HANA Fiori应用里的列表,一旦Scroll到底部就会自动向后台发起新的请求把更多的数据读取到前台显示. 以Product Master这个应用为例,我点击搜索之后 ...

  2. iOS 开发——实用技术Swift篇&Swift 懒加载(lazy)

    Swift 懒加载(lazy) 在程序设计中,我们经常会使用 * 懒加载 * ,顾名思义,就是用到的时候再开辟空间,比如iOS开发中的最常用控件UITableView,实现数据源方法的时候,通常我们都 ...

  3. JPA数据懒加载LAZY配合事务@Transactional使用(三)

    上篇博文<JPA数据懒加载LAZY和实时加载EAGER(二)>讲到,如果使用懒加载来调用关联数据,必须要保证主查询session(数据库连接会话)的生命周期没有结束,否则,你是无法抽取到数 ...

  4. JPA数据懒加载LAZY和实时加载EAGER(二)

    懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载,懒加载是在属性被引用时,才生成查询语句,抽取相关联数据.而实时加载则是执行完主查询后,不管是否 ...

  5. JPA数据懒加载LAZY和实时加载EAGER(转)

    原文:https://www.cnblogs.com/MrSi/p/8081811.html 懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载, ...

  6. Swift中懒加载(lazy initialization)的实现

    Swift中是存在和OC一样的懒加载机制的,但是这方面国内的资料比较少,今天把搜索引擎换成了Bing后发现用Bing查英文\最新资料要比百度强上不少. 我们在OC中一般是这样实现懒加载初始化的: 1: ...

  7. 001_Chrome 76支持原生HTML 图片懒加载Lazy loading

    Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...

  8. Swift - 懒加载(lazy initialization)

    Swift中是存在和OC一样的懒加载机制的,在程序设计中,我们经常会使用 懒加载 ,顾名思义,就是用到的时候再开辟空间 懒加载 格式: lazy var 变量: 类型 = { 创建变量代码 }() 懒 ...

  9. Swift 懒加载(lazy) 和 Objective-C 懒加载的区别

    在程序设计中,我们经常会使用 懒加载 ,顾名思义,就是用到的时候再开辟空间,比如iOS开发中的最常用控件UITableView,实现数据源方法的时候,通常我们都会这样写 Objective-C - ( ...

随机推荐

  1. Android Touch事件原理加实例分析

    Android中有各种各样的事件,以响应用户的操作.这些事件可以分为按键事件和触屏事件.而Touch事件是触屏事件的基础事件,在进行Android开发时经常会用到,所以非常有必要深入理解它的原理机制. ...

  2. ios的NSMutableString用法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 详见代码: // //  main.m //  Foundation5-NSMutableString // //  Created by mj  ...

  3. Linux PAM&&PAM后门

    Linux PAM&&PAM后门 我是壮丁 · 2014/03/24 11:08 0x00 PAM简介 PAM (Pluggable Authentication Modules )是 ...

  4. 解决content is not allowed in prolog问题

    将xml文档用notepad++以UTF-8无BOM格式编码保存便可以了

  5. Mysql-5.6乱码问题

    1 参考:http://www.testwo.com/blog/6930 mysql数据库默认的编码是:Latin1,要想支持中文需要修改为gbk/utf8的编码格式.   1.以root管理员身份查 ...

  6. ios快捷键

    分屏:cmd + option + return 退出分屏:cmd + return cmd + option + [ 代码上跳 cmd + [ 代码左移

  7. 在oc代码中使用swift第三方框架

    swift现在使用越来越多了,一些主流的框架或者效果比较好的demo都陆陆续续使用swift写了.所以,要学会如何在oc的项目中调用swift. 这里主要借助一个桥梁文件,这个桥梁文件一般在你导入sw ...

  8. Linux上在同一端口上共享SSH与HTTPS的工具:SSLH

    添加EPEL源 CentOS 6 # yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rp ...

  9. 关于SWT中的Label类和Text类

    Label类的继承关系图 Label是SWT中最简单的界面组件,给出他的一个实例如下: public class Label1 { public static void main(String[] a ...

  10. [转]Spring数据库读写分离

    数据库的读写分离简单的说是把对数据库的读和写操作分开对应不同的数据库服务器,这样能有效地减轻数据库压力,也能减轻io压力. 主(master)数据库提供写操作,从(slave)数据库提供读操作,其实在 ...