Question

我已经搜索了几个小时的代码，这些代码会在用户到达其位置时对图像产生淡入效果，但我的代码会继续部分工作或根本不工作。我认为这可能是我的css定位，但是我可能是错的。如果有人可以指出我的错误，这肯定会对我有所帮助，并为有类似问题的其他人清理主题。

这是我试图模仿的小提琴（只有图像而不是div）： http://jsfiddle.net/tcloninger/e5qaD/

当我将上面的小提琴代码合并到我的网站中时，所有带有“隐藏我”课程的图像会立即淡入，而不是一次到达它们。所以我找到了这个小提琴，看看它是否能更好地检测元素位置。 http://jsfiddle.net/moagrius/wN7ah/

这导致任何图像都没有消失。这是我试图一起使用的代码片段：

用于检测.hideme类的位置并在窗口中显示不透明的代码：

$(document).ready(function() {

$.fn.isOnScreen = function(){

var win = $(window);

var viewport = {
    top : win.scrollTop(),
    left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();

var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();

return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

$(window).scroll(function () {
    if($('.hideme').isOnScreen()){
        $('.hideme').animate({'opacity':'1'},500);
});

我的html设置方式以及.hideme类的位置示例div：

<div id="two" class="page">
<img src="img/splithead.png" alt="divided attention" class="icons vandhcenter"/>
<div class="abs">
<img src="text/div2.png" alt="section two text" class="text hideme"/>     
</div>
</div>

如果问题是定位，这里是我的CSS的摘录：

div.page
{
display:block;
height:100%;
position:relative;
width:100%;
}

img.icons
{
height:600px;
width:800px;
}

.vandhcenter 
{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

img.text
{
float:left;
position:relative;
width:800px;
}

.hideme 
{
opacity:0;
}

如果所有这些在这样的列表中看起来令人困惑，这里是一个jsfiddle链接，所以你可以看到我的所有代码。没有真正的输出，因为我没有上传我的所有图像文件，但可能更容易看到代码。的jsfiddle，净/ uxB4D /

Answer 1

你所描述的内容听起来像“延迟加载”。已经有不少插件可以做到这一点;例如：http://www.appelsiini.net/projects/lazyload

使图像从不透明度淡入：0到不透明度：达到其位置时为1

1 个答案: