<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. Sass-乘法

    Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同.虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题.比如下面的示例: 编译的时候报“20px*px ...

  2. Java使用对象类型作为方法的返回值

  3. Code Festival 2017 Qual B E Popping Balls

    传送门 神仙计数! 我的计数真的好差啊= = 不过这个题真的神仙 看了题解把整个过程在草稿纸上重写了一遍才想明白= =(一张草稿纸就没有了!!!) 计数的关键就是在于 枚举的有效性和独立性[不能重复计 ...

  4. Jenkins服务配置容易忽略的事项

    git客户端必须安装(可直接yum安装) maven安装的版本(Jenkins上用其插件较稳健,亲测maven3.5是坑) settings.xml文件必要时,指定对应路径(一般选用Jenkins默认 ...

  5. spring-boot整合Dubbo分布式架构案例

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 3.2.5 2.项目文件目录 3.Maven Plugin管理 总项目 pom.xml配置代码: &l ...

  6. dotnet 跨平台编译发布

    dotnet publish 命令,bash脚本如下(Windows安装git即可建议sh关联) publish.sh #!/usr/bin/env bash # one line command: ...

  7. webpack对icon-font图片的处理

    一.对图片的处理 安装url-loader 然后再loaderli配置这样会把图片打包成base64格式 { test: /\.(gif|png|jpg)\??.*$/, loader: 'url-l ...

  8. AGC024B Backfront

    题目大意 给你一个1~n的排列 你有两个操作:将一个数移到最后或将一个数移到最前 问将排列排序最少要几次操作 分析 年纪大了,脑子不行了.. 实际我们只需求出对与一段连续的数它在排列中已经有序的最长长 ...

  9. 记.net3.5离线安装问题

    dism.exe /online /enable-feature /featurename:netfx3 /Source: X:\sourse\sxs pause 相关文件要相同版本的ISO中提取,否 ...

  10. 出席分布式事务Seata 1.0.0 GA典礼

    前言 图中那个红衣服的就是本人 什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上. 简单的说,就是一次大的操作由不同的小 ...