zoukankan      html  css  js  c++  java
  • JS 图片懒加载

    所谓懒加载就是在图片进入 *可视区域* 前,用 *同一张* 图片作为图片的 src 属性值,这样可减少请求及带宽。懒加载的重点是:判断元素是否进入可视区域?

    元素距离文档顶部高度(这个值固定不变) - 整个文档被滚动高度(浏览器滚动条向下滚动高度) <= 可视高度,表示元素进入可视区域

    Demo:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>懒加载</title>
        <style type="text/css">
            * { padding: 0; margin:0; }
            img { display: block; height: 171px;}
        </style>
    </head>
    <body>
        <img src="../site/images/users_avatar/user1.png" data-loaded="1">
        <img src="../site/images/users_avatar/user2.png" data-loaded="1">
        <img src="../site/images/users_avatar/user3.png" data-loaded="1">
        <img src="../site/images/users_avatar/user4.png" data-loaded="1">
        <img src="../site/images/users_avatar/user5.png" data-loaded="1">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
        <img src="../site/images/loading-1.gif" data-loaded="0">
    </body>
    <script type="text/javascript">
        window.onload = function () {
            window.onscroll = function () {
                // 重点:判断元素是否进入可视区域?
                // 元素距离文档顶部高度(这个值固定不变)减去
                // 整个文档被滚动高度(浏览器滚动条向下滚动高度)
                // 小于等于可视高度,表示元素进入可视区域
                var images = document.querySelectorAll('img');
                var scroll_h = document.documentElement.scrollTop;
                var visual_h = window.innerHeight;
                // 实现等待加载效果
                setTimeout(function() {
                    for (var i = 5; i < images.length; i++) {
                        if (images[i].getAttribute('data-loaded') === '0'
                            && images[i].offsetTop - scroll_h <= visual_h
                            ) {
                                images[i].src = "../site/images/users_avatar/user" + (i + 1) + ".png";
                                images[i].setAttribute('data-loaded', '1');
                        }
                    }
                }, 550);
            }
        }
    </script>
    </html>
  • 相关阅读:
    git报错:failed to push some refs to 'git@github.com:JiangXiaoLiang1988/CustomerHandl
    Form_通过Trace分析Concurrent和Form性能和异常详解(案例)
    PLSQL_Oracle Lock锁的处理(案例)
    Report_客制化报表输出Excel后去0问题(案例)
    DBA_Oracle DBA常用表汇总(概念)
    PLSQL_Oracle PLSQL处理日期方式大全(概念)
    PLSQL_Oracle PLSQL内置函数大全(概念)
    PLSQL_PLSQL中DML/DDL/DCL的概念和区分(概念)
    Shell_Oracle Erp基于主机文件Host开发详解(案例)
    Report_客制化以PLSQL输出HTML标记实现WEB报表(案例)
  • 原文地址:https://www.cnblogs.com/gentsir/p/12771005.html
Copyright © 2011-2022 走看看