Question

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

我有几个jQuery脚本，我的页面包含.load jQuery 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>

有什么想法吗？提前谢谢！

Answer 1

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

你很可能正在使用

$(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()处理程序

Answer 2

问题在于：

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

据Firebug说。看起来你试图在页面完全渲染之前调用一个函数，这会导致错误，因为它无法计算偏移量并且会破坏函数的其余部分。

Javascripts没有完全加载jQuery ajax内容

2 个答案: