Dismiss Notice
Alien Soup is a free community for fans of science-fiction, horror, & fantasy! Everybody is welcome here.

XenForo Load Background Image After Page Load

Help increase page response times.

  1. Kevin
    One of the problems is with using a page background image is that large file sizes can cause a delay with your page response times.

    An easy to implement solution with XenForo is to use jQuery to load the background image after the page is ready. If you are using a 50K image file then your total page load time will remain; the important change is that your page content will load first and then the background image so your forum visitors don't have to wait for the 50K image to load first and then the page content. Visitors on fast connections likely might not even notice a difference but visitors on slower connections will see a benefit.

    The change is pretty easy. :)

    Modify your "page_container_js_head" template and at the bottom of the template add this bit of code. Replace {IMAGE_URL} to the URL of the background image that you want to use.

    Code:
    <script>
    $(document).ready(function(){
        var img = new Image();
        img.onload = function(){
          // image  has been loaded
          $("html").css("background-image","url('{IMAGE_URL}')");
          $("html").css("background-repeat","repeat");
        };
        img.src = '{IMAGE_URL}';
    });
    </script>
    And that's it, you're done. Load your XF page and after the content has been loaded the background image will then be requested & loaded.

    We are using this method here at CinVin but most people likely won't notice since the current background image is under 5K. For a better example visit Pottstown Chat (http://pottstownchat.com) where a huge background image, 331K :eek:, is currently being used -- you'll see the page content load first and then the background image will appear after it has finished loading.