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');
    }
  }
);

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

2 个答案: