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

Question

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

为什么它不起作用？

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

In addition, it will be much better idea to use data attribute instead of class to get image names. For example:

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

Answer 2

If you want to create a responsive website, your best friends are CSS Media Queries. Head over to Media Queries to see some examples.

If you want to use a JavaScript and jQuery, I'd suggest to use a jQuery plugin instead of creating your own. Here's an example.

Also, for CSS, there are frameworks too. From the creator of the above plugin, here's one for CSS.