jQuery图像在DIV中滚动时淡入 [英] jQuery Image fadeIn Upon Scroll Inside DIV
本文介绍了jQuery图像在DIV中滚动时淡入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我无法让实际的LazyLoad插件为我工作,所以我想用我自己的方式编写.目前,我有一个加载到DIV中的图像列表.通过PHP查询将它们拉到mysql数据库. DIV滚动设置为自动.我正在使用的代码是:
I can't get the actually LazyLoad plugin to work for me so I am trying to write my own with. Currently I have a list of images loading inside of a DIV. They are pulled by a PHP query to the mysql database. The DIV scroll is set to auto. The code I am using is:
<div id="b1" style="overflow:auto;">
<?PHP $result = mysql_query("SELECT * FROM images");
while($row = mysql_fetch_assoc($result)) {
echo "<img src='$row[photo]' style='display:none'> <br>";
}
</div>
<script type="text/javascript">
function imgCheck() {
var position = $("img").offset().top;
var scrollCheck = $("#b1").scrollTop() + $("#b1").height();
if ( scrollCheck > position) {
$("img").fadeIn("fast");
}
$("#b1").scroll( function() { imgCheck() } );
</script>
尽管这对我来说不是很有效.有人可以帮我或提出一些建议吗?
Although this is not quite working for me. Could anyone help me out or shoot out some suggestions?
推荐答案
以下几点:
- 正如其他人已经说过的那样,您的代码有语法错误-使用PHP和Javascript都是如此.
- 如果使用
display: none
,元素将不会占据任何高度,从而导致整个对象变得不可滚动并发生故障. - 前几个元素应该可见,而无需用户开始滚动
- As the others have already said, your code has syntax errors - both with the PHP and the Javascript.
- If you use
display: none
, the elements will not take up any height, thus causing the entire thing to become unscrollable and fail. - The first few elements should be visible without the user having to start scrolling
考虑到这些因素,我们可以尝试这样编写:
Taking these into consideration, we can try writing this this way:
// Cache the containing element and it's height
var b1 = $('#b1'),
h = b1.height();
// Insert 20 img's - simulating server-side code
for(var i = 0; i < 20; i++){
$('<img />', {
src: 'http://placehold.it/100x100',
alt: '',
class: 'hidden',
width: 100,
height: 100
// visibility: hidden to retain it's size
}).css('visibility', 'hidden').appendTo(b1);
}
b1.scroll(function(){
// Loop through only hidden images
$('img.hidden').each(function(){
// $(this).position().top calculates the offset to the parent
// So scrolling is already taken care of here
if(h > $(this).position().top){
// Remove class, set visibility back to visible,
// then hide and fade in image
$(this).css('visibility', 'visible')
.hide()
.removeClass('hidden')
.fadeIn(300);
} else {
// No need to check the rest - everything below this image
// will always evaluate to false - so we exit out of the each loop
return false;
}
});
// Trigger once to show the first few images
}).trigger('scroll');
在此处查看此演示: http://jsfiddle.net/yijiang/eXSXm/2
See a demo of this here: http://jsfiddle.net/yijiang/eXSXm/2
这篇关于jQuery图像在DIV中滚动时淡入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文