Many IMGs on 1 line cause Opera and IE to stuck
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.
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.
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.
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.
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.
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.
Originally Posted by Lukis
FIRST POST UPDATED WITH SOME INTERESTING BIT.
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.
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 :-).
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread