<!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://img-blog.csdn.net/2018040118174855);background-size: 100% 100%;}
.m-selected-favorite{display: inline-block;width: 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>
