jquery将照片加载到div中,然后进行渐变



我正在尝试创建一个库,我正在尝试将图像加载到div中,当加载完成后,让它淡入淡出,尽管它不太起作用。如果我删除display:none,则图像确实加载到div中,这是fadeIn函数无法正常工作。我能得到的任何帮助都将是伟大的,谢谢。

这是js:

function fadeIn(obj) {
    $(obj).fadeIn(1000);
}
$('.enlarge').click(function() {
    var jthis = this; // save the reference to the $('.enlarge') that was clicked
    var id = $(this).find(".enlarged_txt").attr('id');
    $('#full_image').animate({
        height: "100%"
    }, 300, function() {
    if ( $(jthis).hasClass("v") ) {   
        $('#preload').prop('src', 'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

     fadeIn('#' + id);
     }
});
});

这是带有按钮的容器:

<div class="enlarge bv">
    <img class="enlarged_unselected" src="http://www.klossal.com/klossviolins/elements/fullscreen_unselected.png"/>
    <img class="enlarged_selected" src="http://www.klossal.com/klossviolins/elements/fullscreen_selected.png"/>
     <div id="ESaitory_408" class="enlarged_txt">Enlarge Image</div>
</div> 

这是我正在装载的集装箱:

<div id="full_image">
    <img id="preload" onload="fadeIn(this)" src="#" style="display:none;"/>
</div>

您需要检查complete img属性,因为如果图像已经加载,则不会启动onload。我用你的代码做了自己的方法,感觉不太好:

HTML

<button id="enlarge" data-target="big" data-src="http://placehold.it/400x250">Click to enlarge</button>
<button id="shrink" data-src="http://placehold.it/350x150" data-target="small">Click, to shrink down</button>
<div id='show'>
    <div id="big" class="images"><img/></div>
    <div id="small" class="images"><img src="http://placehold.it/350x150"/></div>
</div>

JS-

$('button').click(function () {
    var $this = $(this);
    var target = $this.data('target');
    var src = $this.data('src');
    var image = $('#' + target + '.images img');
    image.one('load', show_parent_hide_siblings);
    image.attr('src', src);
    if (image.get(0).complete) {  //TAKE A LOOK HERE!
        image.trigger('load');
    }
});
function show_parent_hide_siblings(image) {
    var $this = $(this);
    $this.parent().fadeIn(1000);
    $this.parent().siblings().fadeOut(1000);
}

演示

最新更新