PHP World

首页 > Study > html5 › html5根据屏幕大小,加载不同大小的图片

html5根据屏幕大小,加载不同大小的图片

我们在用bootstrap这类前端框架时,虽然页面局部通过media query实现了,页面始终无滚动条,响应式页面。但是,bootstrap里面的img-responsive类只是通过设置图片100%,并没有真正的实现在手机上和电脑端加载不同大小的图片。这样同样的大图片在手机上浏览时就会大大减少网站打开的速度,而且占用用户大量的流量。

            html5根据屏幕大小,加载不同大小的图片

针对上面的代码,我们解释一下:
其中的img元素是默认情况下显示的图片源,
在其上面的两个source元素则是在特定媒体查询(media queries)条件下显示的图片。
这样我们只需要通过像写熟悉的css的媒体查询一样写代码,就能实现根据浏览器窗口大小,动态加载图片。在手机上,就不用加载一个电脑端才显示的大图。


你可能会注意到,在 media 属性使用的语法与创建CSS媒体特性中使用的语法一样。您可以使用相同的特性,这意味着你可以查询 max-width , min-width , max-height , min-height , orientation 等属性。

同时,您也可以使用这些特性判断设备的方向,从而加载横向或纵向版本的图像,同时您也可以进行大小特性的混合。例如:

                    

上面的代码实现了可以在一个小的景观设备上加载小的,景观裁剪图像的版本。在大的景观设备上加载大的相同的图像版本。
这样,在小尺寸的小型设备上,或在大尺寸的大型设备上,该设备可以自主进行图像主导从而加载不同图像剪裁的版本。


现在,Chrome,Firefox和Opera浏览器都已经实现了对元素的支持。如果你现在就想使用元素可能还需要等待。你也可以使用 Picturefill2.0 ; Filament 成员 提供的一个polyfill。通过下载并添加 picturefill.js 文件到您项目的头部就可以实现:

  
    

Picturefill的限制:
Picturefill在其他的IE版本都可以正常工作,但是IE9却不能识别被包裹在 picture 标签中的 source 元素。为了解决这个问题,在 video 标签内包住你的源元素,这就会使他们在IE9中被识别,例如:

    
            
    

Android 2.3
和IE9一样,Android 2.3识别不了在 picture 元素中 source 元素。然而,在使用常规的 img 标签时,它就可以识别 srcset 属性。为了避免在Android 2.3及任何有相同问题的其他浏览器中出现此问题,确保在 srcset 属性中存在默认用于回退的 img 元素的文件名。
需要JavaScript和本地媒体特性的支持
有了这个基于JavaScript的解决方案,因此在浏览器中需要支持JavaScript。 Picturefill 2.0不提供“no-js”的解决方法,因为如果这样,当原生浏览器支持元素时,将会出现多个图像。但是,如果“no-js”是你的不二选择,你必须使用Picturefill 1.2。
Picturefill另外一个要求就是需要本地媒体特性的支持,从而使 media 属性中的特性能够正常工作。所有现代浏览器都支持媒体特性,IE8和以及更低版本的浏览器是剩下的唯一不支持的 用户群 。
可能存在的额外HTTP请求
在原生支持 srcset 元素,但不支持 picture 元素的浏览器中,和回退的 img 元素中指定的文件名可能会被提前调用,从而会在 source 元素中确定一个更好的拟合图片。
这只是一个暂时的问题,一旦本地支持 picture 元素就会自行消失。

有时图片的宽度不能100%显示完全,可加下边的CSS代码进行控制:

     picture img{
        max-width:100%;
        height:auto;   
     }

Picturefill下载地址:scottjehl.github.io/picturefill/

上一篇:返回列表

下一篇:返回列表

相关文章