懒加载 lazy load
懒加载(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的更多相关文章
- SAP Fiori里的List是如何做到懒加载Lazy load的
今天一同事问我这个问题:S/4HANA Fiori应用里的列表,一旦Scroll到底部就会自动向后台发起新的请求把更多的数据读取到前台显示. 以Product Master这个应用为例,我点击搜索之后 ...
- iOS 开发——实用技术Swift篇&Swift 懒加载(lazy)
Swift 懒加载(lazy) 在程序设计中,我们经常会使用 * 懒加载 * ,顾名思义,就是用到的时候再开辟空间,比如iOS开发中的最常用控件UITableView,实现数据源方法的时候,通常我们都 ...
- JPA数据懒加载LAZY配合事务@Transactional使用(三)
上篇博文<JPA数据懒加载LAZY和实时加载EAGER(二)>讲到,如果使用懒加载来调用关联数据,必须要保证主查询session(数据库连接会话)的生命周期没有结束,否则,你是无法抽取到数 ...
- JPA数据懒加载LAZY和实时加载EAGER(二)
懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载,懒加载是在属性被引用时,才生成查询语句,抽取相关联数据.而实时加载则是执行完主查询后,不管是否 ...
- JPA数据懒加载LAZY和实时加载EAGER(转)
原文:https://www.cnblogs.com/MrSi/p/8081811.html 懒加载LAZY和实时加载EAGER的概念,在各种开发语言中都有广泛应用.其目的是实现关联数据的选择性加载, ...
- Swift中懒加载(lazy initialization)的实现
Swift中是存在和OC一样的懒加载机制的,但是这方面国内的资料比较少,今天把搜索引擎换成了Bing后发现用Bing查英文\最新资料要比百度强上不少. 我们在OC中一般是这样实现懒加载初始化的: 1: ...
- 001_Chrome 76支持原生HTML 图片懒加载Lazy loading
Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...
- Swift - 懒加载(lazy initialization)
Swift中是存在和OC一样的懒加载机制的,在程序设计中,我们经常会使用 懒加载 ,顾名思义,就是用到的时候再开辟空间 懒加载 格式: lazy var 变量: 类型 = { 创建变量代码 }() 懒 ...
- Swift 懒加载(lazy) 和 Objective-C 懒加载的区别
在程序设计中,我们经常会使用 懒加载 ,顾名思义,就是用到的时候再开辟空间,比如iOS开发中的最常用控件UITableView,实现数据源方法的时候,通常我们都会这样写 Objective-C - ( ...
随机推荐
- Codeforces Round #261 (Div. 2) D 树状数组应用
看着题意:[1,i]中等于a[i]的个数要大于[,jn]中等于a[j]的个数 且i<j,求有多少对这种(i,j) ,i<j可是 i前面的合法个数 要大于j后面的 看起来非常像逆序数的样子 ...
- gradle编译出错:Execution failed for task ':app:compileTestDebugJava'.
今天更新了android studio,从0.5.3升级到0.6.1版本号,结果在IDE中编译时没有问题.可是在命令行时编译就会出现下面错误: :app:compileTestDebugJava FA ...
- css3 字体旋转
<style> #mycon { font-weight: bold; font-size: 150px; transform: rotateX(10deg); -webkit-trans ...
- [置顶] 【玩转cocos2d-x之七】场景类CCScene和布景类CCLayer
原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12708811 场景类CCScene和布景类CCLayer都是作为一个容器来使 ...
- 编写函数,以读模式打开一个文件,将其内容读入到一个string的vector中,将每一行作为一个对立的元素存于vector中
#include<iostream> #include<string> #include<vector> #include<fstream> using ...
- 查看MAC系统JRE和JDK版本
经常有些软件有JRE或者JDK的版本要求,但怎么查询MAC上现在的JRE或JDK的版本呢?很简单,用这两个命令 这个是查询JRE的版本: $ java -version java version &q ...
- 微软Hololens学院教程- Holograms 100: Getting Started with Unity【微软教程已经更新,本文是老版本】
这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦!原文链接:https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...
- 聊聊Iconfont
一.前言 说起Iconfont,对大多数人来说可能不是什么新的技术了,现在好多大网站已经开始使用Iconfont.博主今天主要是简单说一下它的使用方法,聊聊使用它时可能遇到哪些坑,不熟悉的同学可以简要 ...
- linux 软件安装各种方法
一 简单介绍 1.软件安装卸载,分几种情况: A:RPM包 这种软件包就像windows的EXE安装文件一样,各种文件已经编译好,并打了包,哪个文件该放到哪个文件夹,都指定好了,安装非常方便,在图 ...
- 那些好用的iOS开发工具
版权说明 本文首发于<程序员>杂志 2014 年 6 月刊,未经允许,请勿转载. 前言 从 苹果发明 iPhone 起,AppStore 上的一个又一个类似 flappy bird 的一夜 ...