1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

AJAX loading of background image

Discussion in 'XenForo Questions and Support' started by Ryan Kent, Mar 17, 2011.

  1. Ryan Kent

    Ryan Kent Well-Known Member

    My site has a beautiful background image which I would like to keep. The problem is it's size @1.5mb is unreasonably large and causes slow page loads. Someone suggested that I could load a solid background image, then after the site is done loading use Ajax to load the background image.

    Does anyone know how to do this or have any experience in this area?
     
  2. Wuebit

    Wuebit Well-Known Member

    O_O why the hell is it 1.5mb?

    P.s you'er site just loads and loads and loads for me there is no background
     
  3. Ryan Kent

    Ryan Kent Well-Known Member

    I removed the background so the site loads better. Right now I have a solid background.

    The background image is below. The image quality of the elf girl is amazing. It is being reworked a bit but it looks incredible on the forums. The forums cover the center and you just see the 2 characters and a bit of the background.

    background_main.jpg
     
  4. Wuebit

    Wuebit Well-Known Member

    That's 118kb not 1.5mb mate
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    It will have been resized when uploaded to here.
     
  6. Wuebit

    Wuebit Well-Known Member

    Really don't do that on my xenforo o_O than again I have a big upload limit
     
  7. Ryan Kent

    Ryan Kent Well-Known Member

    The file is 1.63mb. I am not clear on what conversion process the file undergoes when I upload it to this site. The actual image is 2772 x 1080. You are seeing a shrunk version. You can't begin to appreciate the detail on the image you are viewing.
     

    Attached Files:

  8. Wuebit

    Wuebit Well-Known Member

    Link it here
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Uploaded files are resized to fit the maximum physical dimensions (pixels) set in the ACP.
    In doing so of course, the file size (KB) is reduced.

    It's explained in the FAQ :)
     
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    1.5MB is large but it still doesn't take more than a few seconds to download on a broadband connection after which it becomes cached in the browser for subsequent page loads.

    I don't have AJAX for this. FWIW, here is some basic javascript to set the body background for use in the page_container_js_body template. It's not asynchronous though:

    Code:
    <script type="text/javascript">
    	document.body.style.backgroundImage = "url(http://www.blah.com/image.jpg)";
    </script>
    
     
    Oracle likes this.
  11. Ryan Kent

    Ryan Kent Well-Known Member

    Your wisdom is always appreciated Jake. I'll see if I can put it to good use.
     
  12. Caelum

    Caelum Well-Known Member

    1.5 MB is definitely huge though. Link me and I'll see if I can optimize it a little with no noticeable quality loss :p

    ...As Vodkaholic was probably planning to too. :p
     
  13. Ryan Kent

    Ryan Kent Well-Known Member

    Ok here is a noob question. How can I link attach or link a file in XF? or do I need to host the file?

    What I did for now is replace the image on the site I am building http://www.TeraPVP.com. You are welcome to see it and save it from there. I have a friend working on the image. Right now part of the background is mirrored, and the elf girl needs a bit of cleanup on the edges. You can clearly see the type of background involved.
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

  15. Ryan Kent

    Ryan Kent Well-Known Member

    doh! Thx Brogan. I wasn't aware that my server was open to linking in that manner. Still learning every day!
     
  16. Caelum

    Caelum Well-Known Member

    Here you go. Quality should not be noticeably worse, but it's only about a third of the file size ;)

    http://i.imgur.com/iIWNs.jpg

    Note: if you wanted it, I could cut off some of the left side to make the image have a less gigantic size (and hence also filesize). A width of 1920 is as much as you need, technically speaking :p
     
    Oracle likes this.
  17. Ryan Kent

    Ryan Kent Well-Known Member

    omg TY SO MUCH! Wow! I tried and had a friend try and we couldn't reduce the size significantly without really messing with the quality. Plz tell me...what's the secret? How did you do it?
     
  18. Caelum

    Caelum Well-Known Member

    Photoshop's "save for web & devices" feature ;)

    You're welcome.
     

Share This Page