如何不为较小的屏幕加载图像

Question

我从不同的文章中遇到过许多解决方案，但哪一个对 CPU 的压力最小？有 https://scottjehl.github.io/picturefill/ https://github.com/teleject/hisrc 但推荐使用哪一款并且与浏览器的兼容性最好？

Answer 1

这取决于你打算做什么。如果您不希望元素在屏幕尺寸太小的情况下有背景图片，那么您可以使用媒体查询，例如

@media screen and (max-width: 300px) {
    body{
            background-image: none;
        }
    }
}
@media screen and (min-width: 301px) {
    body{
            background-image: url("/url/to/image.jpeg");
        }
    }
}

但是如果你想控制某个图片标签的来源是否被加载你可以这样做：

if(screen.width > 300) image.src = "/url/to/image.jpeg";

另一方面，您可以使用相同的媒体查询隐藏图片标签

Answer 2

使用css@media检测屏幕宽度来控制是否加载图片。

@media screen and (max-width: 400px) {
    img {
        display: none;
    };
}

或使用javascript.

$(document).ready(function(){
    if (screen.width <= 400px) {
        $("img").css('display', 'none');
    }
  }
);

如何不为较小的屏幕加载图像

How to not load images for smaller screen

javascript

image

image-size