jquery将照片加载到div,然后加载到fadein
我正在尝试创建一个图库,我正在尝试将一个图像加载到一个div中,当它加载完毕后,让它淡入淡出状态,尽管它不太起作用。如果我删除显示:无图像加载到div中,则是fadeIn函数工作不正常。如果我能帮上忙,那就太好了,谢谢 这是js:jquery将照片加载到div,然后加载到fadein,jquery,prop,Jquery,Prop,我正在尝试创建一个图库,我正在尝试将一个图像加载到一个div中,当它加载完毕后,让它淡入淡出状态,尽管它不太起作用。如果我删除显示:无图像加载到div中,则是fadeIn函数工作不正常。如果我能帮上忙,那就太好了,谢谢 这是js: function fadeIn(obj) { $(obj).fadeIn(1000); } $('.enlarge').click(function() { var jthis = this; // save the reference to the
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
您应该添加几行文字,说明哪些不起作用,哪些起作用。否则,任何想回答的人都必须完美地阅读您编写的所有代码,或者复制粘贴并实际尝试。这增加了不必要的摩擦。很可能图像已经缓存,您应该检查
。在更改src
之后立即完成img
元素的属性,这肯定是有道理的,但我很难找出什么不起作用。现在我正在点击。放大,什么都没有发生,我不知道为什么。首先你用CSS隐藏图像,然后你用load函数在加载完成后显示。所以我正试图做到这一点。Display:内联中没有,fadein函数将淡入。我感觉这个函数出错了。嗯,所以我的整个脚本比我发布的脚本长了一点,因为我不想让问题变得过于复杂,我不知道你是否可以把它带到聊天中并帮我解决?
<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>
$('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);
}