Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #6808

    So I’ve gone through every process I can come up with, with no results… upon one’s first visit to my home page, the slider loads funny. It appears to be pre-loading all the images before loading the “loader.gif”, causing it to loop very quickly through every image, and then continue on with the normal execution of the slides. This is my observation anyway, in firefox, and sometimes safari and chrome. Any ides at possible solutions? A few notes: the total page size is 1.79MB, however the background image takes up 524KB of that itself. I’ve tried loading the page without the background with no better results.

    These are page load results for my site: http://gtmetrix.com/reports/allurexpressions.com/0hQzYco3

    (You can view the order and time at which images download from the timeline tab)

    My site address: http://allurexpressions.com

    There appears to be a brief delay concerning the fonts loading for the page as well… I’ll note, my problem ONLY occurs on one’s first visit to the page. After the page has been cached by the browser, it loads fine. It’s a minor problem, but the first visit makes the first impression. Thanks for any help on this issue!

    #55549

    Hey,

    the problem is that you can’t control the order/priority of the resources (i.e. you can’t control if “standard” content images or css/bg images will be loaded first). However scripts like: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/ add a “css resource” preloader to your website. It slows down the loading process but it makes sure that all css images load first. You can add the script code to the bottom of js/custom.js (can be found here: http://www.filamentgroup.com/examples/preloadImages/scripts/preloadCssImages.jQuery_v5.js ). Then add following code to js/custom.js:

    jQuery(document).ready(function(){
    jQuery.preloadCssImages();
    });

    #55550

    I tried implementing the script you’ve mentioned, however it yielded no results… you did mean to add the script code to the bottom of “js/custom.js”, and then beneath the script code add:

    jQuery(document).ready(function(){

    jQuery.preloadCssImages();

    });

    That’s what I did, I was given no errors, however it didn’t appear to do anything. It got me to thinking however, that perhaps it had no affect, because I’ve placed my javascript at the bottom of the page, loading after images anyway… taking that into consideration, I decided to move custom.js back to the header, and it appears to have fixed the problem (while lowering my yslow score, but results over scores right!?)… there does still appear to be an issue loading the logo on first load, but it’s not a consistent problem, occurs every so often.

    Thanks again for your response! The logo issue is a difficult one because it doesn’t always occur, so perhaps I’ll leave it be. According to the timeline, after loading scripts it appears to be the first image loaded anyway.

    #55551

    Yes – the entirely loading process slows down because all css resources load instantly and on page load. This also affects the rating because a higher number of external resources are requested before the “content” displays correct.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Problems with Slider on "first visit to homepage"’ is closed to new replies.