CODEWITHSUNDEEP
htmlcss
panthro
panthro

Reputation: 24061

Downloading assets in media queries

I'm using media queries on my page, if the screen is small, I show some different html code, by toggling the css display property.

For small screens I show:

<div id="slot-machine-mobile" class="row show-for-small-only">
    <div class="small-12 small-centered columns">
        <img src="/assets/img/test-img.jpg">
    </div>
</div>

But as I understand it, this test mg will be downloaded even if just using a large screen. Is there a way so that the image never downloads if they are using a large screen?

Upvotes: 1

Views: 42

Answers (2)

Bouraoui KACEM
Bouraoui KACEM

Reputation: 821

you can use jquery in this case for the responsive : use when you resize the window this code

$( window ).resize(function() {
  if($( document ).width()>width_large_screen)
   {
     $('#slot-machine-mobile img').attr('src','....');
    }else
   {
    $('#slot-machine-mobile img').attr('src','....');
   }
});

and when the document is ready :

$(document).ready(function() {

      if($( document ).width()>width_large_screen)
    {
      $('#slot-machine-mobile img').attr('src','....');
    }else
    {
     $('#slot-machine-mobile img').attr('src','....');
    }
 });

try and tell me if it is ok ,good luck

Upvotes: 0

Teo
Teo

Reputation: 614

You can make a block element and assign to it a background-image through css.

<div class="img">

img { background-image:url("test-img.jpg"); }

So your HTML coud look something like this:

<div id="slot-machine-mobile" class="row show-for-small-only">
    <div class="small-12 small-centered columns">
        <div class="img"></div>
    </div>
</div>

Upvotes: 2

Related Questions