<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实现图片延迟加载原理的更多相关文章

  1. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  2. 基于原生js的图片延迟加载

    当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...

  3. Jquery.LazyLoad.js实现图片延迟加载功能

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了 ...

  4. javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一 ...

  5. JS图片延迟加载分析及简单的demo

    JS图片延迟加载 图片延迟加载也称 "懒加载",通常应用于图片比较多的网页,比如 "美丽说首页","蘑菇街"等一些导购网站上用的比较多,或者 ...

  6. 原生Js页面滚动延迟加载图片

    原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...

  7. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  8. js图片延迟加载

    什么是图片延迟加载? 也叫懒加载. 当页面有多屏的时候,页面中的图片比较多. 那么,在页面载入完毕的时候,并不会把所有的图片都加载进来. 而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载 ...

  9. 前端优化之图片延迟加载(lazyload.js)

    要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...

随机推荐

  1. MySQL--14 半同步复制

    目录 MySQL半同步复制 半同步复制开启方法 测试半同步 MySQL过滤复制 MySQL半同步复制 从MYSQL5.5开始,支持半自动复制.之前版本的MySQL Replication都是异步(as ...

  2. DFSORT

    1.1   Outline   I.             Introduction Overview 2.1    What is DFSORT? 2.2    Usage of DFSORT 2 ...

  3. Sass:RGB颜色函数-Mix()函数

    Mix 函数是将两种颜色根据一定的比例混合在一起,生成另一种颜色.其使用语法如下: mix($color-1,$color-2,$weight); $color-1 和 $color-2 指的是你需要 ...

  4. Sass-颜色运算

    所有算数运算都支持颜色值,并且是分段运算的.也就是说,红.绿和蓝各颜色分段单独进行运算.如: p { color: #010203 + #040506; } 计算公式为 01 + 04 = 05.02 ...

  5. mysql安装 demo [linux centos7] [5.7.26]

    MySQL 安装配置 https://www.runoob.com/linux/mysql-install-setup.html =================================== ...

  6. vue 防止xss攻击

    1.在终端引入xss,命令: npm install xss --save 2.在vue的页面进行引入 import xss from 'xss' 测试 <p v-html="test ...

  7. B/S架构和C/S架构介绍

    一.C/S架构 C/S架构及其背景 C/S架构是一种比较早的软件架构,主要应用于局域网内.在这之前经历了集中计算模式,随着计算机网络的进步与发展,尤其是可视化工具的应用,出现过两层C/S和三层C/S架 ...

  8. ConcurrentLinkedQueue和LinkedBlockingQueue区别

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11394436.html 线程安全队列类图 两者的区别在于 ConcurrentLinkedQueue基 ...

  9. Mac下通过npm安装webpack 、vuejs,以及引入jquery、bootstrap等(初稿)

    前言: 初次接触前端开发技术,一些方向都是在同事的指引和自己的探索后,跑了个简易web,迈入全栈系列.由于是事后来的文章,故而暂只是杂记,写的粗略且不清晰,后续将补之. 主要参考文档: http:// ...

  10. Yii2 kineditor

    用 kineditor实现异步 <table cellspadding=5 width=400> <tr height='150'> <td valign="t ...