<! DOCTYPEhtml>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>Image preloading to optimize user experience</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://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6367a07354f3496eacd928afc7aaa8b0~tplv-k3u1fbpfcp-zoom-1.image);background-size: 100% 100%; }.m-selected-favorite{display: inline-block;width: 72px;height: 72px;background: url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d82fda42a2f4f4eb98490c322f5d640~tplv-k3u1fbpfcp-zoom-1.image);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://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d82fda42a2f4f4eb98490c322f5d640~tplv-k3u1fbpfcp-zoom-1.image" /><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>
Copy the code


\

\

\

\