• 前端延迟加载


    一 整合

    由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面。

    附上自己的github项目地址 https://github.com/247292980/spring-boot

    附上汇总博文地址 https://www.cnblogs.com/ydymz/p/9391653.html

    以整合功能

    spring-boot,FusionChart,thymeleaf,vue,ShardingJdbc,mybatis-generator,微信分享授权,drools,spring-security,spring-jpa,webjars,Aspect,drools-drt,rabbitmq,zookeeper,mongodb,mysql存储过程

    这次就来整合下前端的延迟加载

    之前用的是jquery的lazyload,但是不是全部项目是jq啊?于是,我百度了个轻量记得懒加载包

    然而,百度的前端的质量....

    下面是最少的代码实现懒加载

    三 代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
    
    <a>easy thymeleaf</a>
    
    
    <img class="" src="images/loading.gif" data-echo="images/big.jpg">
    <!--此外他们把div套在img外面加个class,而且img也有个class,然后根据这两个class写css,修改src什么,然后还说src默认为blank.gif或者loading.gif....
    但是研究了下,这是因为他们不懂src代表什么的意思
    当然最大的可能是他复制代码没想那么多...这情况反而最正常
    -->
    
    <!-- src是懒加载前的图片,多为空或者loading。百度第一的竟然说这两图片插件自带....不过哪怕他是错的,基本都秒懂怎么改...
    data-echo是懒加载后的图片-->
    
    </body>
    <script src="js/echo.js"></script>
    <script>
        Echo.init({
            offset: 0,//离可视区域多少像素的图片可以被加载
            throttle: 1000 //图片延时多少毫秒加载
        });
    </script>
    </html>

    四 图片

  • 相关阅读:
    LeetCode
    LeetCode
    LeetCode
    LeetCode
    codevs 2977 二叉堆练习1x
    codevs 2010 求后序遍历x
    二叉树的序遍历x(内含结构体与非结构体版x)
    医院设置x
    求后序遍历x
    [LightOJ1017]Brush (III)(dp)
  • 原文地址:https://www.cnblogs.com/ydymz/p/9829150.html
Copyright © 2020-2023  润新知