javascript - 网站中不同大小的图像取决于屏幕分辨率

Question

我有一个包含一些图像的网站，为此，在只有移动互联网连接的移动设备上，页面加载可能会很慢。所以，我的问题是：根据设备分配不同的图像，更小或更大，加载页面时可能是一个解决方案吗？

示例最初我在 dom 中的 img 可能是：

<img src="" id="img1" alt="img1" />

然后，在 head 中添加一个脚本：

$(document).ready(function () {
               loadImg();
            })

loadImg 函数可以是：

if((window.screen.availHeight < 1234)&&(window.screen.availWidth < 1234))
document.getElementById("img1").src = "small";
else
document.getElementById("img1").src = "big";

Answer 1

试试这个 js 库https://github.com/scottjehl/picturefill

不过，我不知道这对 SEO 有何影响。