Swap Image-sample1

by HYEONGJINKIM

HTML

<a href="01.jpg" class="swap">
    <div class="start">
        <img class="loading" src="http://lorempixel.com/400/200/sports/" alt="" />
    </div>
    <div class="hover" style='display:none;'>
        <img class="loading" src="http://lorempixel.com/400/200/people/" alt="" />
        <div class="caption">
            <p>
                <span class="cap-1">Workshop Demo</span>                        
                <span class="cap-3">Artwork by Carlos Huante</span>
            </p>
        </div>
    </div>    

</a>

CSS

.loading{
    display:none;
    /*로딩 추가*/
}

JavaScript

$('.swap').hover(
    function() {
        //$(this).find('.hover').show().siblings().hide();
        $(this).find('.hover').stop().fadeIn().siblings().hide();
    },
    function() {        
        //$(this).find('.start').show().siblings().hide();        
        $(this).find('.start').stop().fadeIn().siblings().hide();
    }
);

$.fn.preload = function (fn) {
    var len = this.length, i = 0;
    return this.each(function () {
        var tmp = new Image, self = this;
        if (fn) tmp.onload = function () {
            fn.call(self, 100 * ++i / len, i === len);
        };
        tmp.src = this.src;
    });
};

$('.swap img').preload(function(perc, done) {
    console.log(this, perc, done);
    $(this).removeClass('loading');
});