首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >响应图像源取决于介质

问响应图像源取决于介质
EN

Stack Overflow用户
提问于 2014-02-27 18:38:55
回答 2查看 101关注 0票数 0

您好,我正在使用Twitter Bootstrap 3.1.1

有没有办法通过使用某种类来为不同的媒体使用不同的src?隐藏内容不起作用,因为图像仍在加载。

类似于:

代码语言:javascript
复制
<img xs-src="images/xs_img.jpg" md-src="images/md_img.jpg" class="img-responsive" >

是使用javascript的唯一方法吗?或者在bootstrap 3中已经实现了针对这类问题的东西。

EN

回答 2

Stack Overflow用户

发布于 2014-02-27 18:42:25

试试这个JavaScript框架:RetinaJS

编辑:有另一种方法可以做到这一点,只需定义img元素的大小,并将@2x图形作为每个显示的源,这也适用于

票数 0
EN

Stack Overflow用户

发布于 2014-02-28 01:02:01

我创建了自己的js代码。

注意:js代码应该在页面的底部,否则当第一次加载页面时,img还不存在。

代码语言:javascript
复制
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代码

代码语言:javascript
复制
<img data-default-src="images/img.jpg"  data-xs-src="images/xsimg.jpg" >
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22065964

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档