<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://file.cfanz.cn/uploads/png/2022/07/01/1/c740C2176X.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=);background-size: 100% 100%;}
.m-selected-favorite{display: inline-block;width: 72px;height: 72px;background: url(https://file.cfanz.cn/uploads/png/2022/07/01/1/dW3GCN85Pf.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=);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://file.cfanz.cn/uploads/png/2022/07/01/1/dW3GCN85Pf.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" /><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>
