文档章节

延时加载

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
iOS开发中如何解决TableView中图片延时加载

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

鉴客
2012/01/09
6.8K
0
mybatis多表关联查询 - N+1次查询+延迟加载

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

garkey
04/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

kubeadm部署kubernetes集群

一、环境要求 这里使用RHEL7.5 master、etcd:192.168.10.101,主机名:master node1:192.168.10.103,主机名:node1 node2:192.168.10.104,主机名:node2 所有机子能基于主机名通信,编辑...

人在艹木中
今天
6
0
Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
今天
2
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
14
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
5
0
Redis性能问题排查解决手册

一、性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息。通过这些信息来分析文章后面提到的一些性能指标。 nfo命令输出的数据可...

IT--小哥
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部