Question

您好我使用Twitter Bootstrap 3.1.1

有没有办法通过使用某种类来为不同的媒体使用不同的src？隐藏的东西不起作用，因为图像仍然加载。

类似的东西：

<img xs-src="images/xs_img.jpg" md-src="images/md_img.jpg" class="img-responsive" >

是使用javascript的唯一方法吗？或者是否已经在bootstrap 3中实现了这类问题。

Answer 1

试试这个JavaScript框架：RetinaJS

我从未使用它，但看起来很简单。

编辑：还有另一种方法可以做到这一点，只需定义img的大小即可将每个显示器的@ 2x图形作为源工作也是

Answer 2

我创建了自己的js代码

注意：js代码应位于页面底部，否则当第一次加载页面时，img尚不存在。

var timeout=0;
$(window).resize(function(){
    clearTimeout(timeout);
    timeout=setTimeout(function(){
        resizeWindow();
    },500);
});

function resizeWindow(){
    var windowWidth=$(window).width();
    switch(true){
        case(windowWidth<750):/* you could specify other sizes to suit your needs*/
            $("img").each(function(){
                if($(this).attr("data-xs-src")){
                    $(this).attr("src",$(this).attr("data-xs-src"))
                }
            })
        break;
        default:
            $("img").each(function(){
                if($(this).attr("data-default-src")){
                    $(this).attr("src",$(this).attr("data-default-src"))
                }
            })
    }
}
resizeWindow();//use setTimeout if js code is in header

Html代码

<img data-default-src="images/img.jpg"  data-xs-src="images/xsimg.jpg" >

响应式图像src取决于媒体

2 个答案: