Resolved Lightbox Behaviour

evocarlos

Stupid Bollocks
Staff
nice does this mean when i look at forum attachments i wont have to wait a age to look at 10 pics ?
 

Matt

Administrator
nice does this mean when i look at forum attachments i wont have to wait a age to look at 10 pics ?
Which threads are you seeing as slow Carl? I've never noticed it being slow, other than on threads where the images aren't ones we are hosting on here.
 

Matt

Administrator
but this one i tryed to look at the pics last night and spent the best part of an hour trying to look at each pic (post 2) album
https://z22se.co.uk/threads/engine-will-not-start-after-rebuild.21863/
Hmm, just had a look. I can see that it's going to be slow depending on your own connection speed. Each of those images is over 3MB each, and using the Chrome tools, it seems that lightbox loads ALL the images to generate the thumbnails and the initial image, and then it loads the image and thumbnail again as you scroll across. So it's loading a s**t load of data! Let me see if there is anything I can do.
 
Last edited:

Matt

Administrator
thread1.PNG
 

Matt

Administrator
6Mb/s best i can get out in the sticks it somtimes pecks at 10Mb/s
http://www.speedtest.net/result/2461918596.png

same user name and pass as this site ?
for the dev
There isn't a user set up on the dev site, there is only me registered. Should be OK if you register on there.

Your connection speed will explain why it's taking so long then, as it's downloading several hundred MB of data just for that single post. 58MB for the initial load, and then a total of 116MB to reload all the images as you scroll through them.

I'm on 70MB fibre, which is why I don't really notice it.

The easiest fix, is to add the images into the thread as thumbnails, rather than have it load the full images.

Then, light box only serves you the thumbnails as well, rather than the full size ones.
 

Matt

Administrator
So, it looks like this is actually an issue with Chome. I've tested the large image posts with Firefox, and it does need to download the images twice, but once downloaded, they aren't downloaded again. There are also other issues with Chrome which I've been noticing, but hadn't really paid attention to that have also been flagged on the support forums.
 

Matt

Administrator
So, some of the things we've found out so far.

Debug from the console while lightbox is loading the images
console.PNG


The issue doesn't seem to be present in Firefox. Loading lightbox downloads all the images, but allows correct scrolling between images, without downloading them all again each time
lightbox3.PNG


When lightbox is loading the images, it is in fact correctly loading the thumbnails for the thumbnails
thumbnail.PNG


However, the main image (full size) is being downloaded and loaded twice
main_image.PNG


No idea why it's doing that :banghead:
 

Matt

Administrator
This should now be fixed.


Ok. Here are the request/response headers from your attachment:

Code:
Request URL:[URL]https://z22se.co.uk/attachments/2012-09-19-09-50-24-jpg.8944/[/URL]
Request Method:GET
Status Code:200 OK
 
Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:<removed>
Host:[URL='http://www.z22se.co.uk']www.z22se.co.uk[/URL]
Referer:[URL]https://z22se.co.uk/threads/engine-will-not-start-after-rebuild.21863/[/URL]
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
 
Response Headers
Cache-control:private, no-cache, no-store, proxy-revalidate, no-transform
Connection:Keep-Alive
Content-Disposition:inline; filename="2012-09-19 09.50.24.jpg"
Content-Encoding:gzip
Content-Type:image/jpeg
Date:Sun, 03 Feb 2013 23:54:12 GMT
Etag:1352049415
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=5, max=100
Last-Modified:Sun, 03 Feb 2013 23:54:12 GMT
Pragma:no-cache
Server:Apache
Transfer-Encoding:chunked
Vary:Accept-Encoding,User-Agent
X-Content-Type-Options:nosniff
X-Powered-By:pHP/5.4.11

Here are the headers for an attachment on my test forum:

Code:
Request URL:http://<mytestsite>/attachments/dunmorogh_ridgecamp-png.28/
Request Method:GET
Status Code:304 Not Modified
 
Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Authorization:<removed>
Cache-Control:max-age=0
Connection:keep-alive
Cookie:<removed>
Host:<mytestsite>
If-Modified-Since:Sun, 03 Feb 2013 01:26:51 GMT
If-None-Match:1359247650
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
 
Response Headers
Cache-control:private, max-age=0
Connection:Keep-Alive
Date:Sun, 03 Feb 2013 23:58:12 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=5, max=150
Server:Apache

You can see that "If-None-Match" is not being submitted when I request your attachment, but it is being submitted for my attachment. That is the nature of the problem. The question becomes why is it missing from the request? I believe it is related to these response headers from your forum:

Code:
Cache-control:private, no-cache, no-store, proxy-revalidate, no-transform
Pragma:no-cache

That would instruct my browser to not cache the resource.

I can't find where this response header is coming from. Perhaps something from your Apache config?

So, the issue was with a setting we had in the .htaccess file that was "supposed" to improve caching, but was causing the problem on here with lightbox.

Code:
# Force no caching for dynamic files
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>

I've removed all the bits I added in (was done quite a while back now), and it's working as expected once the initial download of all the images has completed.
 
Last edited:

Matt

Administrator
and the correct response being received back now
Rich (BB code):
Request URL:https://z22se.co.uk/attachments/2012-09-19-09-50-24-jpg.8944/
Request Method:GET
Status Code:304 Not Modified
 
Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en,en-GB;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:<removed>
Host:www.z22se.co.uk
If-Modified-Since:Mon, 04 Feb 2013 00:38:41 GMT
If-None-Match:1352049415
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17
 
Response Headers
Cache-control:private, max-age=0
Connection:Keep-Alive
Date:Mon, 04 Feb 2013 06:25:33 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive:timeout=5, max=100
Server:Apache
Vary:Accept-Encoding,User-Agent
 
Last edited:
Top