(jquery) 防止 div 在页面加载期间显示答案

【问题标题】：(jquery) prevent div from showing during page load(jquery) 防止 div 在页面加载期间显示
【发布时间】：2023-11-26 22:20:02
【问题描述】：

如果您转到 www.rambocats.com，当页面加载时，您会看到这个底部中心的 div 显示一两秒钟，然后消失。（Div 用粉色字母表示“Gallery II”）。它应该只在您向下滚动到页面的大约 2/3 时才会出现。如何防止它在初始加载期间显示？

这是 jQuery：

$(document).ready(function(){
var open = false;
$('#homiesSlideButton').click(function() {
    if(open === false) {
        $('#homiesSlideContent').animate({ height:'610px' });
        $(this).css('backgroundPosition', 'bottom left');
               $("#homies-wrapper img").peTransitionHilight({   // image highlight/transitions plugin
                                        slideshow:true, 
                                        transition:"all", 
                                        duration:1500, 
                                        delay:4444, boost:0.3
                                  });
        open = true;
    } else {
        $('#homiesSlideContent').animate({ height: '0px' });
        $(this).css('backgroundPosition', 'top left');
        open = false;
    }
});
});

$("#homiesSlideButton").hide();
$(window).scroll(function(){
if($(window).scrollTop()>4444){               // position on page when button appears
     $("#homiesSlideButton").fadeIn();
  }else{
     $("#homiesSlideButton").fadeOut();
  }
});  


$(window).scroll(function(){
if($(window).scrollTop()>4444){               // position on page when button disappears
     $("#homiesSlideContent").fadeIn();
  }else{
     $("#homiesSlideContent").fadeOut();
  }
});

【问题讨论】：

标签： javascript jquery fouc

【解决方案1】：

我认为它正在为.hide() 事件设置动画，尝试将style="display:none;" 作为$("#homiesSlideButton") 元素的html 的一部分。

【讨论】：

【解决方案2】：

在 div 的 CSS 中，将 div 设置为具有属性

visibility: hidden;

页面加载完毕后，

$("#yourDivId").show();

【讨论】：

【解决方案3】：

发生的情况是它默认设置为可见，因此它会在 javascript/jquery 运行之前显示以隐藏它。

我倾向于为从一开始就不可见的项目添加一个 CSS 类，设置为 display: none; 或 visibility: hidden;，如下所示：

.hide {
    display: none;
}

然后在调用.hide() 后使用jquery 删除类。在元素上：

$('#elementId').hide().removeClass('hide');

【讨论】：

谢谢你的精彩解释！

【解决方案4】：

可以这么简单：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Let's hide and show a div</title>

<style type="text/css">
#myHiddenDiv { visibility: hidden; }
</style>

</head>

<body>

<div id="myHiddenDiv">
Hidden until after the script loads. It will be imperceptible in most cases. But if    you comment out or remove the script, the div will indeed be hidden!
</div>


<script type="text/javascript">
document.getElementById('myHiddenDiv').style.visibility = 'visible';
</script>

</body>
</html>

【讨论】：