Forums

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

Home Forums CSS Responsive Web Design Images

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #205102
    Julian P
    Participant

    Hi All!
    I am trying to make my site responsive. Most of my images are ‘anchor’ linked from other pages. I have removed HTML image px width and height attributes, and replaced them with a ‘max-width: 100%; height: auto;’ style rule. This works fine, in terms of scaling the images. My problem is that, because the pages no longer contain px dimensions, there is a great deal of ‘jerkiness’ when the pages load. Obviously, the browsers are no longer able to lay out the pages in advance, since they no longer have image sizes to use for that purpose. I cannot see a way around this problem. I wish I was wrong, because it is spoiling my site. Any info would be very much appreciated! Thanks.

    #205104
    Shikkediel
    Participant

    Probably the only way to prevent ‘loading buildup’ would be to wait for the whole page to load and then show it. Your most likely friend would be JavaScript there.

    #205106
    Senff
    Participant

    Well, that’s kinda normal and expected. If the images have no HTML-defined dimensions, then during page load they will only occupy a little bit of spance, and then once they’re fully loaded, they’ll take up more space (which will move stuff in the layout).

    Why did you remove the width and height from the images?

    #205109
    Julian P
    Participant

    Hi Senff! I understand what you are saying about the ‘adjustment’ that is taking place. I removed the px width and height attributes from my HTML because, so far as I know, that is a necessary step towards a responsive site. Were I to leave those attributes in place, then surely the images would not contract and expand, as desired? If the images were not being pointed at as anchors, I probably would not have much of a problem. But the nature of my site means I must try to let visitors choose which pictures they want to look at – if at all possible. Jules

    #205111
    Julian P
    Participant

    Hi Shikkediel! Yes, it had crossed my mind that it might come to what you describe. At present, I cannot think of another solution, other than to delay the loading of the images. I have Googled the problem (which is how I am here), and I am surprised I cannot find any direct reference to it. I imagined it to be a regular issue for webmasters seeking to go ‘responsive’. I am very pleased to be getting this feedback, anyway! Any thoughts at all as to what kind of Javascript might be involved? You are quite right that the problem does disappear when the pages have been cached.

    #205117
    Shikkediel
    Participant

    You are quite right that the problem does disappear when the pages have been cached.

    Sorry, I later removed that line in my post… but it should indeed make a difference.

    I think using jQuery is the easiest way to tackle this. It wouldn’t be a lot of code. Here’s a basic example :

    $(document).ready(function() {
    
        var total = $('img').length, loaded = 0;
    
        $('body').hide();
    
        $('img').each(function() {
    
        $(this).one('load', function() {
        loaded++;
        });
        });
    
        var ready = setInterval(function() {
    
        if (loaded == total) {
        clearInterval(ready);
        $('body').show();
        }
        }, 50);
    });
    

    Of course, the common visitor likes to wait as least as possible so it might be good to check if the images are cached but that would be quite a bit more complicated. To be honest, I haven’t bothered about that on my own sites.

    #205120
    nkrisc
    Participant

    Where are your pages coming from? Can you calculate in advance how large the images will be (assuming a dynamic set of images) and set size attributes before the page is served?

    #205122
    Shikkediel
    Participant

    I’ll leave the code in place but I think I was being quite circumventive there. You could also simply listen for the window onload event :

    $(window).on('load', function() {
    
        $('body').show();
    });
    

    And hide body by default in the CSS (possibly)…
    You wouldn’t even really need jQuery for that.

    #205132
    Julian P
    Participant

    Hey Shikkediel! I am extremely grateful to you for the trouble you have taken! Good old jQuery, eh? At the moment, I have a jQuery ‘fade-in’ in place for the images – over a period of three seconds. To be honest, while it is a cool effect, I am much more concerned about avoiding the jerkiness, at present. Art can wait! lol. I am assuming the ’50’ at the bottom of your snippet is specifying 50 milliseconds. Do you think that is sufficient? Of course, it is down to me to test it…which I will be doing shortly. Thank you. Jules

    #205133
    Julian P
    Participant

    That is certainly shorter, Shikkediel…not that it matters greatly! I am still learning, so you will have to bear with me. Could you remind me how to ‘hide body by default’, please? Thanks. J

    #205134
    Julian P
    Participant

    Hi nkrisc! My pages are on a free web hosting server- ‘000’. I know I need to sort out a proper domain, but they have been brilliant for me while I learn the ropes…and no issues at all! I know exactly how large the images are. Most of them still have width and height attributes set in the HTML. I should make clear that I only removed those attributes from a couple of pages – for testing purposes. Could you expand a little on ‘dynamic images’, and ‘setting size attributes before the page is served’? By the way, my site’s URL is in my ‘bio’. Thank you. Jules

    #205135
    Shikkediel
    Participant

    Could you remind me how to ‘hide body by default’

    That would be in the CSS :

    body {
    display: none;
    }
    

    Or with JQ (my fav lib) :

    $(document).ready(function() {
    
      $('body').hide();
    
      $(window).on('load', function() {
    
          $('body').fadeIn(500);
      });
    }):
    

    The other script could be used if you want to give the visitor something to look at, a loading button that shows the progress for example. By the way, the ’50’ in the code is indeed 50ms but it is the interval that it checks if all images have been loaded. So it will keep trying (with 50ms in between) to see if that is the case (then the interval is stoppped with the clearInterval).

    It doesn’t have to be the entire body that is hidden of course. You could show a background and maybe the header already while the page is loading so you’re not looking at a white screen…

    #205136
    Julian P
    Participant

    Thank you so much, Shikkediel, for all of your help. I will definitely be incorporating something of what you have suggested into my site. I am a lot more confident now of finding a solution. Julian

    #205160
    Shikkediel
    Participant

    Glad to help out, no trouble to scribble some more together in case any trouble or new questions arise…

    :-)

    #205173
    Julian P
    Participant

    Thank you, Shikkediel! Nice to have met you…I will let you know how I get on. Have a good one! Jules

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