0

我有一个问题，自从我昨天开始寻找它以来，它让我很头疼。

我有几个 jQuery 脚本，我的页面包含.loadjQuery ajax（在页面底部）。

我对图像使用悬停效果和位于 js/tools.js 中的标题的固定位置

问题是，我的浏览器随机不会将 tools.js 加载到 ajax 中。所以有时候在加载的ajax内容中看不到图片悬停效果。刷新页面时，它可以正常工作。

我的第一个赌注是我使用的脚本发生冲突，或者内容或 .js 加载的顺序存在问题。

js：

$(document).ready(function() {
    $('.cta-btn, .portf1, .portf2, .portf3, .portf4, .portf5, .btn-facebook, .btn-twitter, .btn-linkedin, .btn-studiofacebook, .btn-studiotwitter,.btn-studiolinkedin,.newsitem1, .newsitem2, .newsitem3').append('<span class="hover"></span>').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            $span.stop().fadeTo(200, 1);
        }, function () {
    $span.stop().fadeTo(400, 0);
        });
    });
});

$(function(){
     var stickyHeaderTop = $('#stickyheader').offset().top;

     $(window).scroll(function(){
             if( $(window).scrollTop() > stickyHeaderTop ) {
                     $('#stickyheader').css({position: 'fixed', top: '0px'});
                     $('#stickyalias').css('display', 'block');
             } else {
                     $('#stickyheader').css({position: 'static', top: '0px'});
                     $('#stickyalias').css('display', 'none');
             }
       });   
});

html:

<!-- portfolio -->
<div id="portfoliowrapper">
<div id="portfolioitems"></div>
<script>$("#portfolioitems").load("werk.html #portfolio");</script>
<div class="clear"></div>
<a href="werk.html" class="cta-btn"><h2 class="btn">Werk</h2></a>
</div>

有任何想法吗？提前致谢！

4

2 回答 2

0

你需要展示一些代码，你不能指望我们挖掘你的网站。

您很可能正在使用

$(function(){
   // code that depends on images being loaded here
});

但是，这不会等待图像加载，它只会等到 DOM 准备好进行修改。等待图像的事件是窗口的加载事件。

$(window).load(function(){
   // here all images in the HTML are guaranteed to be loaded
});

第二次运行您的页面时，图像在缓存中，并且当 DOM 准备好时它们已经加载，即来自您的$(document).ready()处理程序

于 2012-06-01T07:47:17.353 回答
0

问题在这里：

$("#portfolio").offset() is null
Line 33

根据萤火虫。看起来您正试图在页面完全呈现之前调用函数，这会导致错误，因为它无法计算偏移量并且会破坏函数的其余部分。

于 2012-06-01T07:56:38.290 回答