如何用原生js写一个懒加载页面带渐变效果

最新推荐文章于 2024-07-18 15:09:36 发布

忍者1

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量172

点赞数

分类专栏：前端文章标签： html5 javascript html

原文链接：http://www.mark-to-win.com/tutorial/50918.html

版权

前端专栏收录该内容

101 篇文章 0 订阅

订阅专栏

懒加载经常是我们性能优化经常使用的方案，那么我们今天就实现一波。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载</title>
    <style>
        img {
            display: block;
            margin: 0 auto 50px;
            width: 960px;
            height: 540px;
        }
        .opacity {
            animation: .5s ani linear;
            -webkit-animation: .5s ani linear;
            -moz-animation: .5s ani linear;
        }

        @keyframes ani {
            0% {
                opacity: 0;
            }

            50% {
                opacity: .5;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutb8xegj31hc0u0k77.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzutz6y29j31hc0u0ak4.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuu8igyyj31hc0u0qgv.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuug47wrj31hc0u0k2q.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuowb0hj31hc0u0akx.jpg" alt="">
    <img src="" data-src="http://ww1.sinaimg.cn/large/005ODVHQgy1fuzuuyjapsj31hc0u0ths.jpg" alt="">
</body>
<script>
    var len = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; // 存储图片加载到的位置，避免每次都从第一张图片开始遍历
    lazyload();// 页面载入完毕加载可视区域内的图片

忍者1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用原生js写一个懒加载页面带渐变效果

懒加载经常是我们性能优化经常使用的方案，那么我们今天就实现一波。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>懒加载</title> <style&g
复制链接

扫一扫

专栏目录