<!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. 如何将 Python 程序打包成 .exe 文件？

    有不少订阅本公众号的朋友都不是玩 Python,甚至都不是计算机相关专业的,当我给他们一个 Python 程序时,他们是完全不知道该怎么运行的. 于是我想是不是可以将我的程序打包成可执行文件,直接运行 ...

  2. 原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能，有实例Demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:htt ...

  3. bootstrap 全局样式

    reset.css html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% ...

  4. JSP环境探针-当前电脑所有系统参数

    1 <%@ page contentType="text/html;charset=gb2312" %> <%@ page import="java.u ...

  5. HashMap为什么是线程不安全的

    HashMap底层是一个Entry数组,当发生hash冲突的时候,hashmap是采用链表的方式来解决的,在对应的数组位置存放链表的头结点.对链表而言,新加入的节点会从头结点加入. 我们来分析一下多线 ...

  6. Gym 101142C CodeCoder vs TopForces (搜索)

    题意:每个人有2种排名,对于A只要有一种排名高于B,那么A就能赢B,再如果B能赢C,那么A也能赢C,要求输出每个人分别能赢多少个人 析:首先把题意先读对了,然后我们可以建立一个图,先按第一种排名排序, ...

  7. Javascript 返回上一页:选中GridVIew的 Chekcbox

    1．  选中GridVIew的值 $("#reverse").click(function () { //$("#checkbox[Num]").attr(&q ...

  8. 文本主题抽取：用gensim训练LDA模型

    得知李航老师的<统计学习方法>出了第二版,我第一时间就买了.看了这本书的目录,非常高兴,好家伙,居然把主题模型都写了,还有pagerank.一路看到了马尔科夫蒙特卡罗方法和LDA主题模型这 ...

  9. 模板 - 动态规划 - 区间dp

    因为昨天在Codeforces上设计的区间dp错了(错过了上紫的机会),觉得很难受.看看学长好像也有学,就不用看别的神犇的了. 区间dp处理环的时候可以把序列延长一倍. 下面是 $O(n^3)$ 的朴 ...

  10. HDU 6003 Problem Buyer【小根堆】

    任意k个都可以,也可以看做把不行的都选了,再随便选一个可以的要选的数量 把区间和m个值都排序,区间按l一序r二序排,枚举m个值,小根堆维护能帮韩当前枚举值的区间的右端点,这样方便删除区间,然后剩下的就 ...