{"id":89,"date":"2005-05-02T16:54:41","date_gmt":"2005-05-02T14:54:41","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/05\/02\/image-preloader\/"},"modified":"2013-01-15T19:11:10","modified_gmt":"2013-01-15T18:11:10","slug":"image-preloader","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/05\/02\/image-preloader\/","title":{"rendered":"Image Preloader"},"content":{"rendered":"<p>When slicing down .PSDs to style the markup, CSS gals and guys usually start with a set of generic rules to make sure everything has some global default white space. At this point they usually style links and corresponding pseudo-classes (<code>:hover<\/code>, <code>:focus<\/code> and <code>:visited<\/code>).<\/p>\n<pre><code>* { margin: 0; padding: 0; }\r\np, ul, ol, dl { margin-bottom: 1em; }<\/code><\/pre>\n<p>After \u2018initialization\u2019 of the CSS file, they probably dive into site specific styling. But hold on! Why not establishing generic <a href=\"http:\/\/glazkov.com\/blog\/archive\/2005\/04\/18\/430.aspx\">content image<\/a> preload notification while we are here?<!--more--><\/p>\n<h3>Why We Should Do That?<\/h3>\n<p>Visitors browsing at slow Dial-up connections have to wait until the large images are downloaded and until something appears on the screen they even don\u2019t have a clue that something is missing \u2014 they see an empty block of space between two blocks of text. I know it confuses <em>me<\/em> sometimes. If we provide a visual clue that something is happening with the web page (e.g. the image is loading and there\u2019s nothing to worry about), the visitor will rest assured that the particular interface element will appear on the screen eventually.<\/p>\n<h3>Background Animation Behind the Content Image<\/h3>\n<p>We need only one simple line of <abbr>CSS<\/abbr>:<\/p>\n<pre><code>img { \r\n    background: url(loading.gif) no-repeat 50% 50%;\r\n}<\/code><\/pre>\n<p>and a GIF animation. GIF is prefect, because it has a small file size and we don\u2019t need anything fancy, just the visual clue.<\/p>\n<h3>Universal \u2018Preloader\u2019<\/h3>\n<p>If you wanted to use this generic background image, there should be a certain level of customization. With a little as possible CSS tweaking (changing background color of the content image) we can reuse the same GIF. Here\u2019s a sample \u2018preloader\u2019. <img src=\"\/img\/loading_transp.gif\" alt=\"preloader sample\" \/>  This animation is transparent, so it\u2019s fairly reusable. Right click and take it with you\u2026<\/p>\n<p>Shown example is nothing revolutionary, but it\u2019s easy to implement and it\u2019s an interface detail that improves usability. Take a look at the <a href=\"http:\/\/webdesign.maratz.com\/lab\/preloader_demo\/\">demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When slicing down .PSDs to style the markup, CSS gals and guys usually start with a set of generic rules to make sure everything has some global default white space. At this point they usually style links and corresponding pseudo-classes (:hover, :focus and :visited). * { margin: 0; padding: 0; } p, ul, ol, dl [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[25,52],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/89"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/89\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}