Question

我找到了一个检测视口宽度的脚本： http://www.codeproject.com/Tips/183715/Browsers-View-port-Width-Height-using-Javascript

我将其添加到上述脚本中：

if (viewportwidth < 321) {
    myimage.innerHTML=""
}   

if (viewportwidth > 320 && viewportwidth < 481) {
    myimage.innerHTML="<img src='320.jpg'>"
} 

if (viewportwidth > 480 && viewportwidth < 721) {
    myimage.innerHTML="<img src='480.jpg'>"
}

if (viewportwidth > 721 && viewportwidth < 1025) {
    myimage.innerHTML="<img src='640.jpg'>"
}   

if (viewportwidth > 1024) {
    myimage.innerHTML="<img src='960.jpg'>"
}

并使用：

<body onload="fnGetWidthHeight()">

<div id="myimage">
</div>

基本上，当用户打开页面时，如果视口为320px或更小，它将根据视口宽度显示某个图像 - 不会显示任何图像。

这是我尝试使用“响应式图像”。此方法是否仅加载请求的图像 - 从而节省带宽？这种方法有哪些缺陷？我希望添加另一个函数来确定'myimage'div的宽度，它将根据浏览器调整大小来改变图像 - 这是可能的。 TIA

Answer 1

好吧，我认为这对于为用户提供更好的Web应用程序非常努力，而且我认为如果考虑使用服务器来填充多个图像大小，可能会更好。我确信您正在努力将解决方案保留在您的知识范围内，并且我鼓励您将此挑战作为学习更多知识的一步。

以下是此解决方案的一些缺陷

当您在加价后优先加载javascript时，您将暂停加载javascript的内容。
Javascript和CSS以不同的方式读取浏览器的宽度，这意味着您需要进行大量的设备测试（或者只是接受较少的可用性）
服务器将阻止您手动调整图像大小，您只需专注于将大文件上传到服务器。
虽然不太可能，但您可能会有不会使用Javascript的用户，您需要考虑他们会看到什么。

至于你的解决方案：

删除单个if语句，只需使用if {}，因为您只会根据用户的屏幕大小使用单个图像。
如果您无法处理服务器端编程，则始终可以使用css媒体查询手动输入标记元素的背景图像或内容。关于这一点的好处是你不必担心通过javascript的实现挂起的图像，并且你将拥有确切的设备宽度。

Answer 2

此方法是否仅加载请求的图像 - 从而节省带宽？

是的，虽然原始代码可能会稍微优化一下（见下文）

这种方法存在哪些缺陷？

在将它用于您在示例中使用它的方面，同时知道您可以始终依赖于您正在阅读的宽度（例如，考虑Retina显示，您阅读的宽度是否会提供正确的图像？），启用JS的人没有真正的陷阱。对于大多数网络抓取工具和JS禁用的人来说，这是一个不同的故事......

我希望添加另一个函数来确定＆＃39; myimage＆＃39;的宽度。将根据浏览器调整大小更改图像的div - 这可能吗？

是的，使用几乎相同的方法并使用窗口resize事件。

稍微更具可读性的代码段：

if (viewportwidth < 321) {
    myimage.innerHTML=""
}     
else if (viewportwidth < 481) {
    myimage.innerHTML="<img src='320.jpg'>"
} 
else if (viewportwidth < 721) {
    myimage.innerHTML="<img src='480.jpg'>"
}    
else if (viewportwidth < 1025) {
    myimage.innerHTML="<img src='640.jpg'>"
}    
else {
    myimage.innerHTML="<img src='960.jpg'>"
    // let's make this one the default
}

javascript用于提供不同的图片尺寸

2 个答案: