Hi
I've looked into this regarding responsive design and there are several
approaches one can use.
The sad part are that browsers does behave a bit different. One approach
could be:
<style>
.large{display: none;}
.medium{display: none;}
.small{display: block;}
</style>
[snip]
<img src="large.png" class="large">
<img src="medium.png" class="medium">
<img src="small.png" class="small">
where we change the display values depending on what should be shown or not.
The sad part are that FireFox desktop and mobile, Chrome, Safari / WebKit
on desktop, iOS and Android and IE will load all images even if they are
set to being not displayed.
Opera tough are a bit different. Opera, desktop, mobile and mini, will
only load the images which are set to be displayed (in the above example
only the small.png) and it will load images from the server if the display
changes to visible on one of the other.
The same goes if a image are used as a fallback in example a object tag:
<object src="someFancySVGChartForNewerBrowsers.svg">
<img src="someCrappyFallbackImageForOlderBrowsers.svg">
</object>
Here Opera will not load the image since it supports svg and there are no
need to load the image from the server. All other browsers supporting svg
will also load the image inside the object tag even if its never displayed
to the user.
I expect this are due to Operas strong focus on mobile and personally I
think Opera's approach are a good approach.
Tough, this does not help. One approach I'm looking at are using HTML5
data-* and doing something like this:
<img data-img-small="small.png"
data-img-medium="medium.png"
data-img-large="large.png"
src="data:image/gif;base64,R0lGODdhAQABAIAAAP///////ywAAAAAAQABAAACAkQBADs="
>
And then let a JavaScript switch which image which should be displayed.
This approach does not load any images by default so it breaks the
semantics a bit and I'm not 100% happy with that.
The reason for the data:image (a 1x1 clear pix) at the src and not just
src="" or no src are to prevent some older browsers to do a "buggy"
request against "/" (the html document). It could be replaced with a
pix.gif or something.
You can find a very quick and dirty test I put together some weeks ago here:
http://files.trygve-lie.com/examples/responsive_image/
Trygve
On Fri, June 10, 2011 2:41 pm, tibolan wrote:
> Hi,
>
> I used to use some scripts like LazyLoad.js (http://www.appelsiini.net/
> projects/lazyload), but, as the author said, it's not anymore usable.
>
> This script change the src of the image by a blank.gif if the image is
> not visible for the moment (above the fold line),and listen the page
> scroll to refresh DOM.
>
> In old time, doing this, stopped the download of the image, and could
> save many bytes during load period.
>
> But, from now this trick do not work anymore, and the image continue
> downloading untill this full load...
>
> My questions:
>
> 1- why all bowsers do the same thing now ? is there a specification
> about that ?
> 2- have you got a clue, idea to solve this problem in modern browsers,
> without doing some so ugly stuff ?
>
> I saw on a french news site (nouvelobs.fr), a rudimentary technique,
> that directly set the src with a blank.gif, and store the real src in
> the className of the image. The script just have to change the src by
> the className content when it necessary. I'm looking for something
> cleaner than that, that keep the HTML "well-formed".
>
> Thank for your feedbacks !
>
>
> --
> To view archived discussions from the original JSMentors Mailman list:
> http://www.mail-archive.com/[email protected]/
>
> To search via a non-Google archive, visit here:
> http://www.mail-archive.com/[email protected]/
>
> To unsubscribe from this group, send email to
> [email protected]
>
------------------------------------------------
Trygve Lie | http://www.trygve-lie.com
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/[email protected]/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/[email protected]/
To unsubscribe from this group, send email to
[email protected]
