Question

I have a problem and it’s giving me headaches since I started looking for it yesterday.

I have a couple of jQuery scripts and my page includes .load jQuery ajax (at the bottom of the page).

I use a hover effect for the images and a fixed position of the header that is located in js/tools.js

The problem is that, randomly my browsers won’t load the tools.js into the ajax. So sometimes you don’t see the image hover effect in the loaded ajax content. When refreshing the page it woks fine.

My first bet was that the scripts I use collide or that there’s a problem with the order in which the content or the .js loads.

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>

Any ideas? Thanks in advance!

Answer 1

You need to show some code, you can’t expect us to dig through your site.

It’s very likely that you’re using

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

However, that will not wait for the images to load, it only waits until the DOM is ready to be modified. The event that waits for images is the load event of the window.

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

The second time your page is run, the images are in the cache and they are already loaded when the DOM is ready, that is from your $(document).ready() handler