您好,我正在使用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中已经实现了针对这类问题的东西。
发布于 2014-02-27 18:42:25
试试这个JavaScript框架:RetinaJS
编辑:有另一种方法可以做到这一点,只需定义img元素的大小,并将@2x图形作为每个显示的源,这也适用于
发布于 2014-02-28 01:02:01
我创建了自己的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 headerHtml代码
<img data-default-src="images/img.jpg" data-xs-src="images/xsimg.jpg" >https://stackoverflow.com/questions/22065964
复制相似问题