CODEWITHSUNDEEP
javascriptimageresponsive-design
Job Kooi
Job Kooi

Reputation: 11

Responsive images with javascript document.write

I want to use a responsive image on my site, load a different resolution based on screen size, and have come up with a simple javascript approach, see below.

Would there be any reason why NOT to use this solution?

Thanks!

<script language="Javascript"> 
var w=window.innerWidth;

if (w<=480){
    document.write('<img src="files/design/logo_480.jpg" ');        
}else if(w<=768){
    document.write('<img src="files/design/logo_768.jpg" ');   
}else{
    document.write('<img src="files/design/logo_960.jpg" >');
}

</script>

Upvotes: 1

Views: 2187

Answers (4)

namelivia
namelivia

Reputation: 2735

You can use the picture element that is browser built-in. See here: http://googlechrome.github.io/samples/picture-element/

More info here on htmlrocks

Upvotes: 1

alexander farkas
alexander farkas

Reputation: 14134

Go with the standard and use picture or srcset with sizes (depends on your use case).

About browser support, there are two polyfills, which you can simply use:

There is really no excuse to use a partial custom solution.

Here is an article series.

Upvotes: 1

phts
phts

Reputation: 3925

I don't know you browser support specification but there is HTML5 approach: <picture> element. But there are few browsers that it support - http://caniuse.com/#feat=picture

UPDATE

Another approach - use CSS and @media rules. But here you will deal with background images instead of <img> elements that may not fit with semantics (When to use IMG vs. CSS background-image?):

@media screen and (max-width: 480px) {
    div.my-image {
        background-image: url(files/design/logo_480.jpg);
    }
}

@media screen and (max-width: 768px) {
    div.my-image {
        background-image: url(files/design/logo_768.jpg);
    }
}

@media screen and (min-width: 768px) {
    div.my-image {
        background-image: url(files/design/logo_960.jpg);
    }
}

Browser support - IE9+, Chrome 21+, FF 3.5+ (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

UPDATE #2

Another approach - instead of write content you can simply change src of existing <img>.

var w=window.innerWidth;
var img = document.getElementById("logo");

if (w<=480){
    img.src = "files/design/logo_480.jpg"
}else if(w<=768){
    img.src = "files/design/logo_768.jpg"
}else{
    img.src = "files/design/logo_960.jpg"
}

Upvotes: 0

CodeBrauer
CodeBrauer

Reputation: 2925

Just take a look here why you should not use document.write https://stackoverflow.com/a/802943/2767886

You should NOT use this JS because:

  • you have to add a resize-event (if the window width changes you need to update the logo size)
  • on resize the new logo-url -> will be a new request to load
  • it's document.write ...
  • people that have javascript off won't see a logo

A pure CSS solution would be easier:

@media screen and (max-width: 480px) {
    .logo {
        background-image: url(files/design/logo_480.jpg);
        width: 480px; height: 75px;
    }
}

@media screen and (max-width: 768px) {
    .logo {
        background-image: url(files/design/logo_768.jpg);
        width: 768px; height: 100px;
    }
}

@media screen and (min-width: 768px) {
    .logo {
        background-image: url(files/design/logo_960.jpg);
        width: 960px; height: 150px;
    }
}

Upvotes: 0

Related Questions