Geek asks and answers

Stop image when loading on smartphone

I am developing a responsive website for a company where there is a slide show with images in the background on a full-sized website (full backstretch screen filling). Since the images are quite impressive in size (about 300 thousand), I’m looking for a way to stop downloading images when viewing the site on a smartphone.

I applied display: noneand visibility: hiddenon the backstretch div with a media request. It hides images, but it seems that they are still loading. Is there any reasonable way to make the browser ignore them at all?

+5
source share
3 answers

If you set the image via CSS, then there is a way.

div : none , div none, , -

CSS

.parent {display:block;}
.background {background-image:url(myimage.png);}

@media only screen and (max-width:480px) {
.parent {display:none;}
}

HTML

<div class="parent">
   <div class="background"></div>
</div>

- http://timkadlec.com/2012/04/media-query-asset-downloading-results/

+6

, - .

- , div:)

HTML:

<div class="container">
    <!-- slideshow container -->
</div>

CSS

/* default to no background image */
.container {
    background-image: none; 
}

/* add it in for wider screens */
@media screen and (min-width: 500px) {
    .container {
        background-image: url(myimage.png);
    }
}
+4

visibility display . , , -, .

+1
source

More articles:


All Articles