<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. macos系统安装mysql

    MacOS系统安装mysql 一.下载 官网下载链接地址:https://dev.mysql.com/downloads/mysql/ 二.安装 打开文件是pkg包,双击进行安装: 按照提示: 点击最 ...

  2. 关于TVS、ESD、稳压二极管、压敏电阻

    一.稳压管和TVS管的工作原理 稳压二极管(又叫齐纳二极管),是一种直到临界反向击穿电压前都具有很高电阻的半导体器件,在这临界击穿点上,反向电阻降低到一个很小的数值,在这个低阻区中电流增加而电压则保持 ...

  3. shell脚本检索所有mysql数据库中没有primary key的表

    1.mkdir -p /root/scripts/ 2. cd /root/scripts/ vim query.sql,代码如下: SELECT CONCAT(t.table_schema,&quo ...

  4. 03.父工程pom、整合测试、SpringBootApplication注解

    父工程 idea点击spring-boot-starter-parent找到父工程spring-boot-dependencies模仿配置 父工程 <?xml version="1.0 ...

  5. 接口上传base64编码图片

    package com.*.util; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io. ...

  6. map简单用法

    let familyNames = []; familyNames = res.Data.map(item=> { return item.ArgText });

  7. mybatis源码分析之06二级缓存

    上一篇整合redis框架作为mybatis的二级缓存, 该篇从源码角度去分析mybatis是如何做到的. 通过上一篇文章知道,整合redis时需要在FemaleMapper.xml中添加如下配置 &l ...

  8. Redis事件通知示例

    1. redis如同zk一样,提供了事件监听(或者说是回调机制), 下面是redis的配置说明: ############################# EVENT NOTIFICATION ## ...

  9. HDU - 6601 Keen On Everything But Triangle 主席树

    Keen On Everything But Triangle 感觉最近多校好多主席树的亚子,但是本人菜得很,还没学过主席树,看着队友写题就只能划水,\(WA\)了还不能帮忙\(debug\),所以深 ...

  10. paper 165: 人脸的两个关键问题--光照和姿态

    人脸识别关键问题研究 a) 人脸识别中的光照问题 光照变化是影响人脸识别性能的最关键因素,对该问题的解决程度关系着人脸识别实用化进程的成败.研究思路是将在对其进行系统分析的基础上,考虑对其进行量化研究 ...