图片预加载，优化用户体验

最新推荐文章于 2022-01-24 16:20:00 发布

weixin_30644369

最新推荐文章于 2022-01-24 16:20:00 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xutongbao/p/9924871.html

版权

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>图片预加载，优化用户体验</title>  
    <style type="text/css">  
        html,body{width:100%;height:100%;margin:0;}   
        .m-selected-favorite_active{display: inline-block;width: 72px;height: 72px; background: url(https://i-blog.csdnimg.cn/blog_migrate/53310614f23fdf23dde067e01b6da140.png);background-size: 100% 100%;}
        .m-selected-favorite{display: inline-block;width: 72px;height: 72px;background: url(https://i-blog.csdnimg.cn/blog_migrate/4b4cd921ea880d0f4de1c695d1b9ce86.png);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://i-blog.csdnimg.cn/blog_migrate/4b4cd921ea880d0f4de1c695d1b9ce86.png" /><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>

转载于:https://www.cnblogs.com/xutongbao/p/9924871.html

weixin_30644369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片预加载，优化用户体验

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预加载，优化用户体验</title> <style type="text/css"&...
复制链接

扫一扫