I'm trying to prevent certain images from loading on mobile, they all have display: none but I know they will load by default, does anyone know any alternative not is using background-image ?
How to prevent an image from loading on the mobile?
0
asked by anonymous 30.01.2017 / 19:34
2 answers
1
Passing src by javascript if the screen size is larger than the mobile screen (stipulated at 480px). Or if you start the resized page at a width less than 480, it will not load the image either.
<script>
window.onload = function()
{
if( window.innerWidth > 480)
{
document.getElementById("minhaimagem").src="https://graph.facebook.com/1299814340/picture?type=large";document.getElementById("minhaimagem").style.display="block";
}
}
</script>
<img id="minhaimagem" style="display:none" />
30.01.2017 / 20:28
0
Using CSS3 media query only loads if you resize the page, so that's what you're looking for.
Example - You will load the pink div with the smallest preview by clicking the Run button, and if you are seeing a resolution higher than 1200 and click on the "All Page" link, your photo will appear (you will only request the image the moment you view it in full screen). Tested with Firebug and no preloads the image into memory.
<style>
.minhaimagem
{
background-color:#f00;
height:200px;
width:200px;
border: 1px solid #000;
}
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
.minhaimagem
{
background-color:#f0f;
background-image: none);
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
.minhaimagem
{
background-color:#f0f;
background-image: none);
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.minhaimagem
{
background-color:#f0f;
background-image: url("https://graph.facebook.com/1299814340/picture?type=large");
}
}
</style>
<div class="minhaimagem">...</div>
30.01.2017 / 20:00