Grow your CSS skills. Land your dream job.

Pre-loading images advice?

  • # September 22, 2011 at 12:59 pm

    @Ampitere Thanks for the advice. I’ve started to implement it on the site and it’s working fabulously!

    @thomas apart from the need to preload mouseover images, there isn’t really a need to have other images preloaded. Except that I’m fussy and want an image-heavy page to have every image appear instantly rather than gradually load. I’ve implemented all of the images for one link from the home page and none of the images on another link from the homepage. The preloaded images appear far more elegantly than the latter. I’m going to implement it on the entirety of my site, but only because it’s mostly made up of images.

    # September 22, 2011 at 1:32 pm

    @Ampitere
    Don’t get me wrong — I have nothing against preloading images, but as @pinandmountme mentioned, they’re typically for hover/mouseover effects. Preloading hundreds of images isn’t that common, and I wanted to know what his reasoning was.

    Personally, if I wanted to improve how the page looked while it loaded, I would probably set aside blocks for where the images will appear when they load and have some kind of loading/spinner icon display until they loaded.

    I still think that downloading hundreds of images for potential display on another page is wasted bandwidth, but in the end, it’s up to you and what you think is best for your website.

    # September 22, 2011 at 3:20 pm

    Surely the actual image appearing immediately is better than a loading/spinner icon? Especially when the images are photographs of paintings? I actually initially wanted a gradual load effect from left to right like on this site:

    http://iwanttoseemymountains.tumblr.com/archive

    But no one seemed to know how to do it…

    Any ideas?

    # September 22, 2011 at 8:43 pm

    @pinandmountme
    I agree that having the images appear immediately is better than loading/spinner icons until the images appear (which would only be on the first visit, btw), but the trade-off is that you don’t have to load hundreds of images into memory on pages that aren’t displaying any images — or expending extra bandwidth, when the visitor may not be interested in your gallery page (of course, that may be the only purpose of your site).

    I honestly don’t see what the big deal is. Unless you have a lot of visitors on dial-up connections or you’re using massive images, they should load almost as fast as you can scroll down the page to see them. If your images are taking a long time to load, you should really consider optimizing them for better file size.

    As for the fade effect on the website you mentioned, it appears to be using Prototype to fade in the images after page load, although jQuery or plain JavaScript could be used to create a similar effect. Here’s a quick example that you can modify to fit your needs:

    http://jsfiddle.net/Zrzhp/

    EDIT: I just realized that you were referring to the dynamic loading as the page scrolled down. Here’s a revision of the above: http://jsfiddle.net/5P5wk/2/

    # September 23, 2011 at 5:15 am

    That looks great. I’ve tried to put it onto one of my pages, but it doesn’t work. I’m sure I’m doing something wrong. But I just don’t know what. Any ideas?

    The page I’m using it on as a test is here:

    http://www.davidwightman.net/abstraction2.html

    As you can probably see, images just aren’t appearing.

    I’ve put the JS in the:

    at the bottom. And the css in:

    at the top. I don’t understand why it wouldn’t work. Please help!

    # September 23, 2011 at 5:16 am

    Something to do with my html, perhaps?

    # September 23, 2011 at 6:29 am

    Something to do with the fact you are using a JQuery image pre-loader but have made no reference to JQuery anywhere in your html ;-)


    In situations like this, your browser debug tools are your friend!

    Uncaught ReferenceError: $ is not defined

    # September 23, 2011 at 7:13 am

    What do I do?!

    # September 23, 2011 at 7:58 am

    Paste that line of code I gave you above into your page, above where you call the load.js!

    # September 23, 2011 at 10:50 am

    I’ve done what you said, but now images don’t show up at all! Any chance you can figure out what I’m doing wrong this time?

    # September 23, 2011 at 12:01 pm

    The example I gave was just a demonstration — you’ll need to modify it to fit your needs.

    First, it places the images into a div with an ID of “more-images”, so you’ll need that if you want the images to appear. Second, it’s pulling random images from lorempixum. You’ll want to modify the JS to pull in your own images.

    # September 23, 2011 at 8:55 pm

    Ah, sorry. My JS knowledge is zero. Back to the drawing board unless anyone has any other suggestions?

    # September 24, 2011 at 1:05 pm

    In order to dynamically load content on the page, you’ll have to use JS. If you plan on making similar websites in the future, it’s definitely something that will be beneficial to learn.

    Start with some simple tutorials (there are plenty online), and once you have a feel for the basics, look for information on specific things you’d like to try. Everyone has to start from somewhere.

    # June 6, 2013 at 6:50 pm

    @Ampitere That code prevent loading images if they are already cached? Thanks.

Viewing 14 posts - 16 through 29 (of 29 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".