[英]Dynamically change image depending on screen resolution
我有一个带有全屏背景图片的部分,该背景图片是通过JavaScript数据属性加载的。 由于这是一个响应式站点,因此根据屏幕尺寸来放大和缩小相同的背景图像(1920 x 1080px),这并不是非常友好的性能,例如在屏幕较小的手机上。
HTML:
<!-- BEGIN PAGE TITLE -->
<section id="page-title" class="page-title-lg" data-bg-img="nature/full-20.jpg">
<div class="container">
<div class="page-title-wrapper">
<div class="page-title-txt">
<h1>Large Page Title</h1>
</div>
</div>
</div>
</section>
<!-- END PAGE TITLE -->
JS:
// Image Background
$('[data-bg-img]').each(function() {
var dataImg = $(this).attr('data-bg-img');
$(this).css('background-image', 'url(assets/img/' + dataImg + ')');
});
是否有办法动态检测窗口大小并通过不同的数据属性(例如2560 x 1440、1920 x 1440、1280 x 800、640 x 960等)加载适当的图像?
如果说平板电脑,台式机和移动设备具有三个不同的图像,则可以创建一个简单的系统来自动选择要加载的正确图像。
<section id="page-title" class="page-title-lg" data-bg data-bg-img-desktop="nature/full-20.jpg" data-bg-img-tablet="nature/full-20.jpg" data-bg-img-mobile="nature/full-20.jpg"></section>
请注意以下四个属性:data-bg data-bg-img-desktop,data-bg-img-tablet,data-bg-img-mobile。
页面加载时,获取屏幕宽度并加载最接近屏幕尺寸的图像:
<script type="text/javascript">
var imageBgs = document.querySelectorAll('[data-bg]');
var screenWidth = window.innerWidth;
for(var i=0; i<imageBgs.length; i++) {
if( screenWidth < 768 ){
// Load mobile image
imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-mobile')+')';
} else if( screenWidth >= 768 && screenWidth <= 1024 ) {
// Ipad
imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-tablet')+')';
} else {
// desktop image
imageBgs[i].style.backgroundImage = 'url('+imageBgs[i].getAttribute('data-bg-img-desktop')+')';
}
}
</script>
您是否有理由不能直接更改CSS?
有几种方法可以解决此问题。 一种方法是监听resize
事件,并相应地更新所有图像。 但是,您也可以使用jquery在页面加载期间为每个元素创建媒体查询,并让浏览器处理所有内容的切换。
这是说明如何做到的小提琴: https : //jsfiddle.net/czr41bqp/
本质上,您将为每个要切换的屏幕尺寸添加样式,并在此处创建style
元素并将其附加到标题中。 当然,这需要您预先生成图像的所有版本,并且大小与每个图像都一致。
$(function() {
//define a template with all media queries we want to target
var mediaQueryTemplate = '\
@media screen and (min-width:350px) { \
#{{ID}} { background-image: url({{BASE_URL}}/350x150) } \
} \
@media screen and (min-width:640px) { \
#{{ID}} { background-image: url({{BASE_URL}}/640x960) } \
} \
@media screen and (min-width:1280px) { \
#{{ID}} { background-image: url({{BASE_URL}}/1280x800) } \
} \
@media screen and (min-width:1280px) { \
#{{ID}} { background-image: url({{BASE_URL}}/1280x800) } \
} \
@media screen and (min-width:1920px) { \
#{{ID}} { background-image: url({{BASE_URL}}/1920x1440) } \
} \
@media screen and (min-width:2560px) { \
#{{ID}} { background-image: url({{BASE_URL}}/2560x1440) } \
} \
';
var $style = $('<style>');
$style.appendTo('head');
$('[data-bg-img]').each(function() {
//generate all media queries from the template for each image and add them to the style tag
var dataImg = $(this).attr('data-bg-img');
var mediaQueries = mediaQueryTemplate.replace(/{{ID}}/g, this.id).replace(/{{BASE_URL}}/g, dataImg);
$style.text($style.text() + mediaQueries);
});
});
一种方法是将“ src”属性保留为空白,然后根据屏幕宽度进行分配。
windowSize = $("window").width();
if(windowSize >= 1000){
$("img").attr("src","bigFile.png")
}
if(windowSize <= 999 && windowSize >= 500){
$("img").attr("src","mediumFile.png")
}
if(windowSize < 499){
$("img").attr("src","mobileFile.png")
}
另外,您可以使用类似:
if(windowSize >= 1000){
$("imageContainer").html("<img src="bigFile">);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.