Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS image loading and css

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #31248
    Marion
    Member

    Hello,

    I’ve been asking myself a question for a while. It’s not a big matter but I’d like to have opinions about it.

    I often make sites with images that show only when loaded. For this, I’ve been using jQuery and the very good onImagesLoaded plugin for a while. happy with it.
    http://includes.cirkuit.net/js/jquery/plugins/onImagesLoad/1.1/documentation/

    For instance, in this site : http://bluemoonworks.net/index.php/works
    (it works fine except a little bug that makes image not show sometimes. It’s when they already in cache i think. i’m working on it. The site’s been released but I’m working on smoothing it up a bit now so it’s not fully up to date.)

    From the beginning, the thumbnails are display: none. (it does not affect referencing, right? )
    If not, during the time the javascript is not yet ready, they’re visible (if cached). then hidden by the javascript and fade in again. that’s not very nice.

    Well I’m just wondering about the fact of hiding the thumb in CSS or not. Is that the right way to do ?
    It kind of bothers me that the images are not visible if the browser does not have js activated. I work in japan and a lot of traffic is made through portable phones.

    What do you think ?

    #65871
    TT_Mark
    Member

    You should never have images disabled in the CSS, because people do have JS disabled in some browsers.

    A possible solution, is to hide them with JS while the page is loading, then display them when they are loaded.

    However, your page loading time is very slow. I had to wait 24 seconds for everything to display! Try compressing the images or working out a better way of saving space/loading time

    #65872
    gno
    Member

    If you set all images you want to be affected to visibility: hidden; in your stylesheet they will be invisible – then when the page is fully loaded you can use javascripts to make them visible.

    The difference between display: none; and visibility: hidden; is, that the visibility property simply just hides whatever is inside the box, not making the box squeeze together, as display:none; will.

    So, setting the startup value in your css and then altering it later with javascript is the way to go.

    However, if you want to make sure that the other content is loaded before the images, you have to enable the images with javascript after the document goes to the ready state. If you don’t – the other content will be delayed as much, as if you didn’t hide the images…

    #65873
    gno
    Member

    TT_Mark, I disagree with your “never let people without javascript out”-statement. It really depends what crowd your site is targeting.

    On this very page, for example, it is okay to take javascript and css3 compliant browsers for granted.

    I would not take javascript-disabled and old browsers into account unless I made something that targeted a group of either very old or technically disabled people.

    I dont know anything about the choice of browsers among japaneese nor american people. I remember seeing browser statistics from the top10 danish sites a few months ago – IE6 were down to 2,5% or so – and almost no visitors came there without javascript and flash enabled.

    #65874
    Marion
    Member

    TT_Mark > I aggree about avoiding it as much as possible. However, the site being for a design agency, people usually have their javascript on and a recent browser version.
    You can’t always downgrade because of people who are leaving 10 years in the past. Espacially in that case i think.

    I tested the solution before and, as i said, it does not really perform well.

    I’ll have a look at compression possibilities, thanks.

    gno > the parent element has a fixed size so visibility or display doesn’t really change anything, in that case I think. But you’re definetely right otherwise.

    I wish I could take for granted the js/html5/css3 case! It’s not the case yet.

    Japan is strangely late on the web side. Still depends on the target of course but the internet explorer part tends to be huge on some of the websites i’ve done here… that’s so depressing.

    Well, that’s another matter. I tend to take js for granted on computer side.
    The only thing is the portable devices being unaccessible. But again, depending of the crowd, it’s a professional website so I don’t think that’s so relevant.

    Thanks guys for your input.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.