text/code displaying before images
starrynight
Registered Users Posts: 69 Big grins
Hi Folks:
As I look at smugmug sites in the new smugmug, I get a glitchy re-draw of pages where the text/code appears before the images do. For example, pages with collages & long captions show the captions and then the pictures appear over the captions while everything rearranges on the screen. The same thing happens with content blocks (say, the word Pages appears, then moves down and is replaced with the galleries) and with code (I think I can sometimes see the HTML/CSS code before it is covered up by the pictures it's supposed to address).
Is this happening to other people? I find it troublesome. I hate when images/windows update as I am looking at them because I start to read text and then have it move/be covered. It impairs my ability to recognize and understand what appears on the page (In fact there is a very old psychological study from the 1960's that says that content changes during viewing can impair recognition -- Bruner & Potter, 1962.)
I can see it at Sherlock Photography's customization page:
http://www.sherlockphotography.org/Customisations/Smaller-gallery-icons. The HTML code appears for a second or so and then is replaced with the pictures.
So, do others see this, or is this a quirk of my browser/computer? Or is it something people have actually set on their page?
As I look at smugmug sites in the new smugmug, I get a glitchy re-draw of pages where the text/code appears before the images do. For example, pages with collages & long captions show the captions and then the pictures appear over the captions while everything rearranges on the screen. The same thing happens with content blocks (say, the word Pages appears, then moves down and is replaced with the galleries) and with code (I think I can sometimes see the HTML/CSS code before it is covered up by the pictures it's supposed to address).
Is this happening to other people? I find it troublesome. I hate when images/windows update as I am looking at them because I start to read text and then have it move/be covered. It impairs my ability to recognize and understand what appears on the page (In fact there is a very old psychological study from the 1960's that says that content changes during viewing can impair recognition -- Bruner & Potter, 1962.)
I can see it at Sherlock Photography's customization page:
http://www.sherlockphotography.org/Customisations/Smaller-gallery-icons. The HTML code appears for a second or so and then is replaced with the pictures.
So, do others see this, or is this a quirk of my browser/computer? Or is it something people have actually set on their page?
0
Comments
DayBreak, my Folk Music Group (some free mp3s!) http://daybreakfolk.com
Firefox & Mac 10.8.4 for me.
I think that text code is text in text blocks further down the page -- the text displays first then the pictures (presumably because the text transmits faster).
http://n-sherlock.smugmug.com/Customisations/Smaller-gallery-icons
What you're seeing is the text boxes I have on the page to show the CSS code you should be using. Once the galleries blocks load in, those are pushed further down the page where they should be, and then on my custom domain, code runs to turn those into nicely-formatted, dark-backgrounded code boxes.
The delay in loading the page can be analysed by Chrome's "timeline" tab. If I do that, I see that page load delay is about half due to latency to the server, and half due to the time taken to add each widget to the page (that page has an unusually high number of widgets present, 17).
I'm in New Zealand, so my latency to SmugMug's servers is high, and each of the many CSS and JavaScript files that SmugMug relies on takes about 300-600ms to begin loading. The issue with that is that several JS files must be loaded before the remaining JS to be loaded can be identified. This causes the minimum possible page loading time for an empty cache (or by pressing "refresh") to be at least 3 or 4 multiples of my latency to SmugMug.
The good news is that that particular delay doesn't occur the second time any page on my site is loaded (as long as I stay away from the refresh button) as virtually everything on the page can be cached. This allows the minimum loading time to drop to about 2 multiples of the latency (e.g. a request to load the page itself, a request to fetch the first page of a gallery, start displaying).
Once the code has all been loaded, the content blocks on the page must be individually rendered and added to the page, this seems to take quite a long time (~600ms). In particular, every time a Galleries widget is added to the page, it forces the browser to pause and perform a page layout. You can see that happening on this very spaced out, laggy timeline segment:
The reason seems to be that for galleries widgets (or more precisely, tiles views), when each one of these is rendered to the page, it calls _getTilesConfig() to set up the configuration for the block. That in turn calls getContainerWidth(), which checks offsetWidth and so forces Chrome to perform a complete page re-layout and style recalculation:
If I patch out the call to .offsetWidth:
YUI.add('ss-patch-offset', function(Y) { var Patch = function(){ }; Patch.prototype.getContainerWidth = function() { return 800; } Y.augment(Y.SM.PageWidget.BaseView, Patch, true); });The time for the JS load event to complete drops from 500ms to 300ms, as the relayout/recalculate stages are eliminated:
In practice, that delay might not be avoidable, since the width of those blocks is really needed in order to display the thumbnails the right size. Also, if you only have 1 or 2 galleries blocks on the page, the extra time spent repeating the offsetWidth calculation will be unnoticeably small.
I could solve the awkward display of those white textboxes on my site by hiding them until the page is finished loading.
I'd be happy to investigate the slow loading of any of the other pages you've mentioned.
Please check out my gallery of customisations for the New SmugMug, more to come!
I do see the same issue when I load my home page (which is not unveiled) -- at my site the "Pages" header appears and is pushed down, rearranging the home page. It doesn't look good, though I wouldn't call it a bug exactly.
Another example is the captions at this site: http://lucdejaeger.smugmug.com/ (pop up captions appear in text boxes before being replaced by pictures).
It's a style issue I find problematic (and I can see that interacts with the speed of the servers). My goal in posting the query was to make sure it wasn't something about my connection/browser, first, and second, to try to avoid those customizations/code that produces the effect (which I dislike intensely).
So, the answer to my first question is that indeed it's not just me. The second question still needs further exploration.
Oh, and on topic - I see the code loading first, too, with Mac and Chrome. BUT now I understand why from the very well put together explanation up above - super explantation! Thanks!
Nope, just wanted to be sure you didn't also send that to SmugMug support or anything
You might be able to work around that, but you'll have to ask again once you're unveiled! One way it might be improved is by setting a minimum height for the blocks that will load in later using CSS. This would give them some height before they load so that the blocks from further down the page should start off further down where they belong.
For example, this CSS would ensure that Galleries blocks start off nice and tall:
.sm-page-widget-galleries .sm-page-widget-body:empty { min-height:600px; }I've applied that to my page now, it looks much better while loading, so thanks for bringing this up!
http://n-sherlock.smugmug.com/Customisations/Smaller-gallery-icons
You could even display a loading animation in the space where the gallery block will appear.
This is a side-effect of SmugMug adding alt/title attributes to photos for us, and I think I've only seen it in Firefox (Chrome doesn't do it). The browser is displaying the alt text for the photo for you before the photo loads in.
This can be mitigated by adding CSS to style the alt-text for the image, especially if your page background is a solid colour. For example:
/* Hide the image alt-text that appears during loading in Firefox */ img { font-size: 0px !important; color: #17171A !important; /* Match the background colour of the page */ }Please check out my gallery of customisations for the New SmugMug, more to come!