<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
border: none;
vertical-align: middle;
}
.in{
border: 1px solid black;
margin: 10px;
text-align: center;
height: 400px;
width: 400px;
float: left;
}
.in img{
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<ul class="list">
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
<li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>
</ul> <script>
var oBtn = document.getElementsByTagName('button')[0];
var aImages = document.images;
loadImg(aImages);
window.onscroll = function(){
loadImg(aImages);
};
function loadImg(arr){
for( var i = 0,len = arr.length; i < len; i++){
if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
arr[i].isLoad = true;
arr[i].style.cssText = "transition: ''; opacity: 0;"
if(arr[i].dataset){
aftLoadImg(arr[i],arr[i].dataset.original);
}else{
aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
}
(function(i){
setTimeout(function(){
arr[i].style.cssText = "transition: 1s; opacity: 1;"
},16)
})(i);
}
}
}
function aftLoadImg(obj,url){
var oImg = new Image();
oImg.onload = function(){
obj.src = oImg.src;
}
oImg.src = url;
} </script>
</body>
</html>

js页面可视区域懒加载的更多相关文章

  1. 如何使用echo.js实现图片的懒加载(整理)

    如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...

  2. wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  3. 原生js - 两种图片懒加载实现原理

    目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...

  4. webpack多页面开发与懒加载hash解决方案

    之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景,如果是常规单页面应用的话,上篇文章提供的方案是没有问题的.但是前端项目复杂多变,应对复杂多页面项目时,我们不得不继续踩w ...

  5. Vue.js笔记 — vue-router路由懒加载

    用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...

  6. js实现图片的懒加载

    原文地址:https://blog.phyer.cn/article/9277.欢迎大家访问我的博客(●ˇ∀ˇ●) // 防抖 let lazy_timer; window.addEventListe ...

  7. js可视区域图片懒加载

    可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...

  8. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  9. js 图片懒加载

    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...

随机推荐

  1. 关于ng-class中添加多个样式类的解决方案

    想要达到ng-class的效果,有两种写法 1.class=“{{class}} class1 class2” 2.ng-class="{true: 'active', false: 'in ...

  2. BZOJ1855 [Scoi2010]股票交易[单调队列dp]

    题 题面有点复杂,不概括了. 后面的状态有前面的最优解获得大致方向是dp.先是瞎想了个$f[i][j]$表示第$i$天手里有$j$张股票时最大收入(当天无所谓买不买). 然后写了一个$O(n^4)$状 ...

  3. ACM学习历程—HDU1719 Friend(数论)

    Description Friend number are defined recursively as follows. (1) numbers 1 and 2 are friend number; ...

  4. 1067 Bash 游戏v2

    传送门 1067 Bash游戏 V2 基准时间限制:1 秒 空间限制:131072 KB 分值: 10   有一堆石子共有N个.A B两个人轮流拿,A先拿.每次只能拿1,3,4颗,拿到最后1颗石子的人 ...

  5. C++正确的cin输入

    void test1(void) { int number; cout << ">> pls input a integer number:"; while ...

  6. POJ2553( 有向图缩点)

    The Bottom of a Graph Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 9779   Accepted:  ...

  7. Hadoop中Partition解析

    1.解析Partition Map的结果,会通过partition分发到Reducer上,Reducer做完Reduce操作后,通过OutputFormat,进行输出,下面我们就来分析参与这个过程的类 ...

  8. 虚拟机出现ping DUP

    在主机的网络连接里,停用虚拟网卡vmnet1和vmnet8,再启用虚拟网卡vmnet1和vmnet8.

  9. QDUOJ 河老师的新年礼物(尺取法)

    河老师的新年礼物 发布时间: 2017年1月1日 15:11   最后更新: 2017年1月1日 15:13   时间限制: 1000ms   内存限制: 256M 描述 河老师的新年礼物是一个长度为 ...

  10. SDN学习

    SDN & OpenFlow & Open vSwitch SDN SDN(软件定义网络)是一个概念.是一个思想.一个框架.是一种网络设计理念,它有三个特征 控制平面与转发平面分离 控 ...