www.webdeveloper.com
Results 1 to 7 of 7

Thread: Many IMGs on 1 line cause Opera and IE to stuck

  1. #1
    Join Date
    Sep 2013
    Posts
    4

    Question Many IMGs on 1 line cause Opera and IE to stuck

    Hello,
    I am really struggling here with Opera and IE, and after few days of research, haven't been able to find answer.

    I have a gallery and I want to show image thumbnails on 1 line in scrollable div. Still no problem. But the more thumbnails I have (even 100 is a problem), the more the problem starts to show. In FF and Chrome, it is absolutely ok, but in Opera and IE, the whole page gets soooo laggy, that it is useless.

    I find, that the problem is caused by having the images on one line... if you add "float: left" to them, so that they wrap at the end of the div, they are in multiple rows and so NO slowdown whatsoever (see example bellow). It has nothing to do with specificly "float", if you manage to arrange images in multiple rows any else way, slowdown is gone as well.

    EXAMPLE:
    http://fotolukis.cz/new/problem/slow.html
    http://fotolukis.cz/new/problem/quick.html

    If you need any more resources to see, just ask for it please.
    So if anyone has pleeease any suggestions, I would really appreciate it and be thankful for the rest of my life Thank you in advance.

  2. #2
    Join Date
    Aug 2006
    Posts
    1,909
    Not only are there hundreds of images on the page, but many of them are enormous 1500px images between 600K-1.2MB in size. The total page size is 21.7MB, on either of the links you've provided. So it seems to be a simple situation of way too many and too large images for one web page.

  3. #3
    Join Date
    Sep 2013
    Posts
    4
    Thanks for reply.
    It is a good point, but unfortunately it is not the problem .
    a) Yes, there are hundreds of pictures, but the problem occurs even when there is let's say 50 - 100, even though it is just a tiny bit less noticeable.
    b) Those 1500px images are not the thumbnail, but they are only in "href" attribute of <a>, that surrounds every thumbnail.
    c) I tried to replace those big images, with smaller ones (120x80px) and sadly there was no difference in performance.
    d) Plus it would not explain, why wrapping images is more lines removes the problem.

    But thank you.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,139
    You could try adding a line break after each of the <li>'s. Some browsers might have problems with excessive line lengths, but I do not expect this to help. The W3C validator said you had some character encoding issues as well.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Aug 2006
    Posts
    1,909
    Quote Originally Posted by Lukis View Post
    Thanks for reply.
    It is a good point, but unfortunately it is not the problem .
    a) Yes, there are hundreds of pictures, but the problem occurs even when there is let's say 50 - 100, even though it is just a tiny bit less noticeable.
    b) Those 1500px images are not the thumbnail, but they are only in "href" attribute of <a>, that surrounds every thumbnail.
    What tool are you using that shows you not downloading these huge images? Firebug on Firefox is what I use, and it certainly showed you downloading huge files (as well as thumbnails). It took over 2 minutes to display your site.

  6. #6
    Join Date
    Sep 2013
    Posts
    4
    FIRST POST UPDATED WITH SOME INTERESTING BIT.

    For rtrethewer:
    Thank you for suggestion. Unfortunately line break really did no difference and after correcting code to fit validator needs performance did not improve as well.

    For tracknut:
    I use Firefox for debugging. But to prove my point... The 21MB or so, that you see are downloading are a few images, that are set to preload (via JS). If the page wanted to download all full images, it would be roughly 650MB total :-).

  7. #7
    Join Date
    Sep 2013
    Posts
    4
    I FIND OUT SOMETHING.

    I took the quick version (with floated images, that wrap into muliple lines, because of that) and tried to set the width of thumbnail container so that all images will fit on 1 line. And guess what... It runs nice and swift, even when they are in ONE line.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles