选项卡用户hover行为下的图片预加载实例页面

CSS代码：

.tab-a {
    display: inline-block;
    padding: 5px 0;
    margin: 0 15px;
    border-bottom: 3px solid transparent;
    color: #343;
    font: menu;
    font-size: 14px;
}
.tab .active {
    border-bottom-color: #019EE4;
    color: #019EE4;
}
.panel {
    padding: 15px;
}
.panel img {
    display: none;
}
.panel .active {
    display: inline-block;
}
                

HTML代码：

<div id="tab" class="tab">
    <a href="javascript:" class="tab-a active">美女1</a>
    <a href="javascript:" class="tab-a">美女2</a>
    <a href="javascript:" class="tab-a">美女3</a>
</div>
<div id="panel" class="panel">
    <img src="mm1.jpg" class="active">
    <img data-src="mm3.jpg">
    <img data-src="mm4.jpg">
</div>
                

JS代码：

var elAs = $('#tab a'), elImgs = $('#panel img');

// 选项卡点击行为
elAs.each(function(index) {
    $(this).data('index', index).click(function() {
        var target = elImgs.eq($(this).data('index'));    
        // 选项卡UI
        $(this).addClass('active').siblings('a').removeClass('active');
        // 面板显隐
        target.addClass('active').siblings('img').removeClass('active');    
    });    
});
    
// 本demo的最重点，hover行为预加载图片
elAs.on({
    mouseenter: function() {
        var target;    
        if (!this.preloaded) {
            target = elImgs.eq($(this).data('index'));
            // 图片地址换成真实地址
            target.attr('src', target.attr('data-src')).removeAttr('data-src');
            // 标记已加载
            this.preloaded = true;
        }
    }    
});