大佬教程收集整理的这篇文章主要介绍了jquery – 获取隐藏图像的高度?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一堆图像,其中大部分都是在页面加载时隐藏的.只有第一张图像可见.我需要做的是给它们一个负的上边距,使图像垂直居中.唯一的问题是,我现在的代码非常不一致,只是时不时地工作.我实际上不确定这是我的代码还是图像被缓存或其他东西.
这就是我所拥有的:
$('#frontpage-sidebar-slideshow img').each(function(i,v) { // I read that preloading the images would solve the problem,but this doesn't do anything //var src = $(this).attr('src'); //$('<img/>')[0].src = src; // First make parent .slide visible to be able to get the image dimentions (not possible if image is invisiblE) var showAfter = false; if(!$(this).parent('.slide').is(':visible')) { showAfter = true; $(this).parent('.slide').css({ // .show() might also work display: 'block',visibility: 'visible',opacity: 1 }); } // Get dimentions var wrapHeight = parseInt($('#frontpage-sidebar-slideshow').height(),10) + 20; var imgHeight = $(this).height(); var offset = Math.ceil((wrapHeight - imgHeight) / 2); // Set offset if needed if(imgHeight > wrapHeight) { $(this).css('margin-top',offset); } // Show image again if needed if(showAfter) { $(this).parent('.slide').show(); } });
我正在使用SlidesJS创建图像的幻灯片. HTML格式如下所示:
<div class="slide"> <a href="url goes here"> <img width="200" src="image src goes here" alt="" style=""> <div class="overlay"> <p class="title"> Some title </p> <p> Some content </p> <p> More content </p> </div> <!-- overlay --> </a> </div> <div class="slide" style="display: none;"> <!-- Only the first image is visible,so this one will be hidden --> <a href="url goes here"> <img width="200" src="image src goes here" alt="" style=""> <div class="overlay"> <p class="title"> Some title </p> <p> Some content </p> <p> More content </p> </div> <!-- overlay --> </a> </div>
有两个问题:
1)第一张图像的高度结果非常不一致.有时我得到包装器值(.slide的高度),有时我得到实际的高度值.我不知道是什么造成了这个.
2)无论我做什么,我只获得第一张图片的高度值.其余的图像只返回0.是的,它们甚至不返回包装器高度(.slide的高度),这很奇怪.
有任何想法吗?
更新我刚刚意识到SlistenJS和我的脚本都在页面加载上运行,它们可能会发生冲突(我正在尝试显示图像,获取它们的大小,然后隐藏它们,而SlidesJS想要隐藏所有这些,除了第一个),所以我尝试在setTimeout(代码,300)中包装上面的整个脚本,现在它至少似乎给了我第一张图像的一致结果,但其余的图像仍然返回0.
以上是大佬教程为你收集整理的jquery – 获取隐藏图像的高度?全部内容,希望文章能够帮你解决jquery – 获取隐藏图像的高度?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。