文档章节

延时加载

ycYinG
 ycYinG
发布于 2016/12/08 16:11
字数 232
阅读 1
收藏 0

####延时加载主要原理 当页面没有滚动到指定位置的时候,页面中不需要显示的图片不加载,当页面滚动到指定位置时,加载并显示相应的图片 ####具体实现 1.先让图片不加载,即让图片的src属性改变为_src 2.当页面滚动到图片刚开始的位置的时候,加载图片 3.所谓的加载就是将图片的_src的属性值赋值给src完成加载操作 4.判断当图片距页面的上边距小于浏览器高度+滚动距离时,加载图片 ####需获取的变量 页面的滚动的距离 var top = document.body.scrollTop || document.documentElement.scrollTop; 图片距离页面的上边距 var offtop = img[i].offsetTop; 获取浏览器的高度 var clientH = document.documentElement.clientHeight; ####判断条件
for (var i = 0; i < img.length; i++) { if (img[i].offsetTop < top + windowHeight) { img[i].src = img[i].getAttribute('_src'); } }

© 著作权归作者所有

共有 人打赏支持
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
私信 提问
EF架构~看看下面这代码,你还敢用它的延时加载吗?

linq to entity或者linq to sql都提供了非常方便的延时加载功能,什么意思?就是说在建立对象时,它会将数据库中的表关系同时建立进来,然后在查询时,如果用到的外键表的数据,才会建立这个...

mcy247
2017/12/06
0
0
LINQ-to-SQL那点事~关于延时加载的性能,微软给出了不错的解决方案

 LINQ-to-SQL虽然已经属于过去事了,但由于历史原因,还是要关注一下它,呵呵,当微软推出linq to sql之后,最吸引开发者的地方可能就是可视化的数据模型,灵活可控的分部方法及神神秘秘的延...

mcy247
2017/12/06
0
0
GOF-23种设计模式——单例模式(学习笔记)

1、核心作用。 保证一个类只能有一个实例,并且提供一个访问该实例的全局访问点。 2、常见的应用场景。 Windows的Task Manager(任务管理器)就是典型的单例模式。 Windows的Recycle Bin(回...

小杰滔滔
2016/06/22
33
0
mybatis多表关联查询 - N+1次查询+延迟加载

对象一对一关联 实体类: ClassroomMapper.xml StudentMapper.xml 关联集合对象 实体类: StudentMapper.xml ClassroomMapper.xml N+1次查询执行sql命令多次,效率低。 解决办法:1.添加缓存...

garkey
04/01
0
0
iOS开发中如何解决TableView中图片延时加载

IOS开发中如何解决TableView中图片延时加载是本文要介绍的内容,主要是来学习TableView加载图片的问题。具体内容来看本文详细内容。 经常我们会用tableView显示很多条目, 有时候需要显示图片...

鉴客
2012/01/09
7K
0

没有更多内容

加载失败,请刷新页面

加载更多

老男孩 - python函数编程day2

mark

以谁为师
18分钟前
1
0
【58沈剑 架构师之路】缓存,究竟是淘汰,还是修改?

允许cache miss的场景,不管是memcache还是redis,当被缓存的内容变化时,是修改缓存,还是淘汰缓存?这是今天将要讨论的话题。 问:KV缓存都缓存了一些什么数据? 答: (1)朴素类型的数据...

张锦飞
20分钟前
0
0
Spring异常之Druid – unregister mbean error set JAVA_OPTS="-Ddruid.registerToSysProperty=true"

Spring异常之Druid – unregister mbean error 2017年04月19日 12:13:42 Dr.Zhu 阅读数:6688 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/arti...

linjin200
21分钟前
1
0
数据结构-图-知识点总结

一、基本术语 图(graph):图是由顶点的有穷非空集合和顶点之间边的集合组成,通常表示为:G(V,E),其中,G表示一个图,V是图G中的顶点的集合,E是图G中边的集合。 顶点(Vertex):图中的数据...

hblt-j
23分钟前
1
0
SAP订单编排和流程增强概述

SAP产品里的订单处理,无论是On-Premises解决方案还是云产品,我认为归根到底可以概括成四个字:订单编排,包含两个层次的内容: 1. 单个订单通过业务流程或者工作流驱动的状态迁移; 2. 多种...

JerryWang_SAP
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部