zoukankan      html  css  js  c++  java
  • 图片预加载,优化用户体验

    <!DOCTYPE html>    
    <html lang="en">    
    <head>    
        <meta charset="UTF-8">    
        <title>图片预加载,优化用户体验</title>  
        <style type="text/css">  
            html,body{100%;height:100%;margin:0;}   
            .m-selected-favorite_active{display: inline-block; 72px;height: 72px; background: url(https://img-blog.csdn.net/2018040118174855);background-size: 100% 100%;}
            .m-selected-favorite{display: inline-block; 72px;height: 72px;background: url(https://img-blog.csdn.net/20180401181741607);background-size: 100% 100%;}
        </style>  
    </head>    
    <body>  
    <span class="m-selected-favorite_active" id="m-favorite" data-active="active"></span> 
    
    <div style="display:none"><img src="https://img-blog.csdn.net/20180401181741607" /><div> 
    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>  
    <script type="text/javascript">
    $('#m-favorite').on('click', function () {
        var that = $(this);
        if (that.data('active') === 'active') {
            that.data('active', 'notactive');
            that.removeClass('m-selected-favorite_active');
            that.addClass('m-selected-favorite')
        } else {
            that.data('active', 'active');
            that.removeClass('m-selected-favorite');
            that.addClass('m-selected-favorite_active');
        }    
    });
    </script>      
    </body>    
    </html>





  • 相关阅读:
    [ZOJ1610]Count the Colors
    浅谈算法——线段树之Lazy标记
    浅谈算法——线段树
    [HEOI2013]Segment
    [JSOI2008]Blue Mary开公司
    [JSOI2016]扭动的回文串
    [BZOJ3790]神奇项链
    [BZOJ2565]最长双回文串
    [BZOJ2160]拉拉队排练
    [POI2010]Antisymmetry
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924871.html
Copyright © 2011-2022 走看看