无法让 js fadeIn() 工作

Question

当我

滚动到页面底部时，试图弄清楚我如何使用fadeIn（）函数。如今，这似乎是一种相当常见的技术，我想使用它。我的代码如下，但我找不到让图像淡入的方法。

var c = 0;
$(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      c = c + 1;
      if (c <= 7) {
        $('#intro').html($('#intro').html() + '<ul><li><a target="_blank" href="http://mywebsite.com"><img src="images/filler.png" alt="" />Count = ' + c + '&raquo;</a></li></ul><br class="clear" />');
      } else if (c == 8) {
        $('#intro').html($('#intro').html() + '<br /><p><a target="_blank" href="example_page.html">Search historical stories</a></p>');
      } else {
        // do nothing
      }
    } 
  });
});

Answer 1

我认为您的第一个问题是您检测到已滚动到页面底部的方式。看看这个。

Javascript：如何检测浏览器窗口是否滚动到底部？

我已经更新了您的代码进行演示。

jsFiddle demo without fadeIn（）

var c = 0;
$(window).scroll(function() {
    if((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
        c++;
        if (c <= 7) {
            $('#intro').html($('#intro').html() + '<ul><li><a target="_blank" href="http://mywebsite.com"><img src="images/filler.png" alt="" />Count = ' + c + '&raquo;</a></li></ul><br class="clear" />');
        } else if (c == 8) {
            $('#intro').html($('#intro').html() + '<br /><p><a target="_blank" href="example_page.html">Search historical stories</a></p>');
        }
    } 
});

您在问题中提到使用 fadeIn（）。下面是更新为使用 fadeIn（） 的代码演示

jsFiddle Demo with fadeIn（）

var c = 0;
$(window).scroll(function() {
    if((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
        c++;
        if (c <= 7) {
            var el = $('<ul><li><a target="_blank" href="http://mywebsite.com"><img src="images/filler.png" alt="" />Count = ' + c + '&raquo;</a></li></ul><br class="clear" />').hide().appendTo('#intro').fadeIn();
        } else if (c == 8) {
            var el = $('<br /><p><a target="_blank" href="example_page.html">Search historical stories</a></p>').hide().appendTo('#intro').fadeIn();
        }
    } 
});

Answer 2

您正在以不同的方式尝试它，确实人们正在加载图像，但他们将其隐藏并在滚动上显示以最大程度地减少页面加载时间

我

给你一个我通过谷歌搜索找到的小提琴

jsfiddle.net/tcloninger/e5qaD/

$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hideme').each( function(i){
            
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
            
        }); 
    
    });
    
});

#container
{
    height:2000px;    
}
#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}
.hideme
{
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
    
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    
</div>

发生的事情是，它们只是在加载时保持隐藏状态，并且在滚动时内容可见。