js实现图片延迟加载原理
<img src="data:image/1188695.png" alt="taobao" trueImg="image/1.jpg" id="img"/>
js
var img=document.querySelector("#img");
window.setTimeout(function (){
var oImg=document.createElement('img');
oImg.src=img.getAttribute('trueImg');
oImg.onload=function(){
img.src=this.src;
oImg=null;
}
},500);
所有的事件绑定都是异步编程
js盒子模型:
clientHeight=内容的高度+上下填充;
offsetHeight=clientHeight+上下边框;
clientTop=borderTop;
offsetTop:父级定位元素的上偏移量->margin(自己最外边到border)
scrollHeight:一般都是约数,在不同的浏览器中获取到的结果是不同的
scrollTop:滚动条减去的宽度或者高度
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
<a href="javascript:void 0;">跳转页面</a>
取消a标签默认行为
<a href="#">跳转页面</a>
刷新当前页面
var timer1=setTimeout(function(){
console.log(11);
},1000);
console.log(timer1);
window.clearTimeout(1);
js实现图片延迟加载原理的更多相关文章
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
- Jquery.LazyLoad.js实现图片延迟加载功能
从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了 ...
- javascript实现图片延迟加载方法汇总(三种方法)
看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一 ...
- JS图片延迟加载分析及简单的demo
JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...
- 原生Js页面滚动延迟加载图片
原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- js图片延迟加载
什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...
- 前端优化之图片延迟加载(lazyload.js)
要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...
随机推荐
- 微信小程序(9)--音频及视频弹幕
记录微信小程序音频及视频弹幕播放效果. 1.audio <!-- audio.wxml --> <audio poster="{{poster}}" name=& ...
- HDU4035 Maze 期望DP+树形DP(好题)
题意:有一个树形的迷宫,有N个房间(标号为1~N)以及N-1条通道将它们连通,一开始在1号房间,每进入一个房间i,有k[i]的概率被陷阱杀死回到房间1,有s[i]的概率找到出口逃离迷宫,如果没有找到出 ...
- Python3.5-20190519-廖老师-自我笔记-面向对象中slots变量--@property的使用
python是动态语言,可以随时随地给实例对象添加属性和方法,但是我们想限制属性的名字,可以使用__slots__特殊变量来限制 使用__slots__要注意,__slots__定义的属性仅对当前类实 ...
- Codeforces 958F2 Lightsabers (medium) 尺取法
题目大意: 输入n,m,分别表示人的个数和颜色的个数,下一行输入n个数,对应每个人的颜色,最后一行输入对应每个颜色的人应有的数量: 问是否能找出一个区间,满足条件但有多余的人,输出多余的人最少的个数, ...
- AGC016题解
呼我竟然真的去刷了016QwQ[本来以为就是个flag的233] 感觉AGC题目写起来都不是很麻烦但是确实动脑子qvq[比较适合训练我这种没脑子选手] 先扔个传送门:点我 A.Shrinking 题意 ...
- Matlab中利用null函数解齐次线性方程组
摘自:http://blog.csdn.net/masibuaa/article/details/8119032 有齐次线性方程AX=0,且rank(A)=r<n时,该方程有无穷多个解, 可以用 ...
- hover()函数的用法
定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数. 实例 当鼠标指针悬停在上面时,改变 <p> 元素的背景颜色: $("p").hove ...
- NET Core+win10+Jenkins+Gogs+open ssh持续集成
背景 阿里云测试环境一台,带宽1M跟不上,Jenkins安装一个插件耗时很长,于是想在本地搭建Jenkins服务,将生成的安装文件同步到目标服务器上. 技术点有: win10:本地环境是win10,测 ...
- 【leetcode】1025. Divisor Game
题目如下: Alice and Bob take turns playing a game, with Alice starting first. Initially, there is a numb ...
- Navicat Premium 12 如何连接阿里云虚拟主机SQL Server 数据库
这个是一台 阿里云购买云虚拟主机!密码已经重置完毕,现在我们 需要知道 数据连接的地址,数据库名,帐号以及密码. 根据不同的运营商 选择 这里我们选择阿里云 云数据库 SQL Server版本 填写 ...