Question

我正在制作一个响应式网站，但我需要为不同的屏幕尺寸加载不同的图像。我试图根据window.width设置一个变量'path'的值，通过在图像上应用的类获取图像名称。

为什么不起作用？

 if (window.width() <= 410) {
     var path = 'images/small/';
 } else 
 if (window.width() <= 650) {
var path = 'images/medium/';
 } else {
   var path = 'images/big/';
 }

 $('.gallery li').click(function(){
    $('.content').load(path + $(this).attr('class'));
    });
 });

Answer 1

您无法使用jQuery.load方法加载图像。你应该把图片标记：

$('.gallery li').click(function(){
    var img = $("<img />");
    img.attr('src', path + $(this).attr('class'));
    $('.content').replaceWith(img);
});

此外，使用数据属性而不是类来获取图像名称会更好。例如：

<ul class="gallery"><li data-image="example.jpg"> ... </li> ... </ul>

Answer 2

如果您想创建自适应网站，那么您最好的朋友就是CSS媒体查询。前往Media Queries查看一些示例。

如果你想使用JavaScript和jQuery，我建议使用jQuery插件而不是创建自己的。 Here's an example

另外，对于CSS，也有框架。来自上述插件的创建者here's one for CSS。

按窗口宽度加载不同的图像文件夹

2 个答案: