<!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