Polymer 根据屏幕宽度加载不同的图像
我正在开发一个引导转盘使用聚合物在我的网站。根据屏幕宽度的不同，我想显示两种类型的图像。我已经为此编写了一个代码，但这里的问题是，当宽度改变时，图像没有改变。提前谢谢你Polymer 根据屏幕宽度加载不同的图像,polymer,Polymer,我正在开发一个引导转盘使用聚合物在我的网站。根据屏幕宽度的不同，我想显示两种类型的图像。我已经为此编写了一个代码，但这里的问题是，当宽度改变时，图像没有改变。提前谢谢你 <dom-module id="carousel"> <style> :host { display: block; } img { width: 100%; height: 100%; } </style>
<dom-module id="carousel">
<style>
:host {
display: block;
}
img {
width: 100%;
height: 100%;
}
</style>
<template>
<div class="container">
<div id="Carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" style="margin-bottom:0px; z-index:1;">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner center" role="listbox">
<div class="item active">
<img src= "{{ img1 }}" >
</div>
<div class="item">
<img src= "{{ img2 }}" >
</div>
</div>
</div>
</div>
</template>
<script>
Polymer({
is: 'carousel',
properties: {
img1: { type: String, notify: true },
img2: { type: String, notify: true },
},
ready: function() {
this.methodToFixLayout();
$(window).on( "resize", this.methodToFixLayout );
},
methodToFixLayout: function() {
var windowsize = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if( windowsize > 1000 ) {
this.img1 = "//large01.jpg";
this.img2 = "//large02.jpg";
} else {
this.img1 = "//small01.jpg";
this.img2 = "//small02.jpg";
}
},
});
</script>
：主持人{
显示：块；
}
img{
宽度：100%；
身高：100%；
}
聚合物({
是‘旋转木马’，
特性：{
img1:{type:String，notify:true}，
img2:{type:String，notify:true}，
},
就绪：函数（）{
此.methodToFixLayout（）方法；
$（窗口）.on（“调整大小”，this.methodToFixLayout）；
},
methodToFixLayout:函数（）{
var windowsize=window.innerWidth | | document.documentElement.clientWidth | | document.body.clientWidth；
如果（窗口大小>1000）{
this.img1=“//large01.jpg”；
this.img2=“//large02.jpg”；
}否则{
this.img1=“//small01.jpg”；
this.img2=“//small02.jpg”；
}
},
});
我建议您使用iron image，它是一种用于显示图像的元素，提供了文档中所述标准标签上没有的有用的大小调整和预加载选项。因为你将使你的应用程序更重，有多个图像来匹配特定的屏幕。（响应总是更好）。 无论如何，如果你想使用你的元素，你最好利用它 将数据绑定到多介质查询。下面是您的carousel元素的一个更详细的实现，希望对您有所帮助
<dom-module id="my-carousel">
<style>
:host {
display: block;
}
img {
width: 100 %;
height: 100 %;
}
</style>
<template>
<div class="container">
<div id="Carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" style="margin-bottom: 0px; z-index: 1;">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner center" role="listbox">
<!-- use is dom-repeat -->
<template is="dom-repeat" items="{{images}}" as="item">
<div class="item">
<img src$="{{_selectImage(item)}}" class$="{{ _isActive(item.active)}}"/>
</div>
</template>
</div>
</div>
</div>
<!-- iron-media-query -->
<iron-media-query query="(min-width: 601px)" query-matches="{{_isMobile}}"></iron-media-query>
</template>
<script>
Polymer({
//Caution: an element name must ALWAYS contain a dash
is: 'my-carousel',
properties: {
//Using Array for your images
images: {
type: Array,
value: function() {
return [{
small: '//small01.jpg',
large: '//large01.jpg',
active: true
}, {
small: '//small02.jpg',
large: '//large02.jpg',
active: false
}];
}
},
//true when min-width=601px
_isMobile: {
type: Boolean,
value: false,
notify: true
}
},
// return the status of the image
_isActive: function(item) {
return item.active === true ? 'active' : '';
},
_selectImage: function(item) {
if (_isMobile) {
return item.small;
} else {
return item.large;
}
}
});
</script>
</dom-module>
：主持人{
显示：块；
}
img{
宽度：100%；
身高：100%；
}
聚合物({
//注意：元素名称必须始终包含破折号
是‘我的旋转木马’，
特性：{
//对图像使用数组
图像：{
类型：数组，
值：函数（）{
返回[{
small:'//small01.jpg'，
大：“//large01.jpg”，
主动：正确
}, {
small:'//small02.jpg',，
大：“//large02.jpg”，
活动：错误
}];
}
},
//最小宽度=601px时为真
_伊斯梅尔：{
类型：布尔型，
值：false，
通知：正确
}
},
//返回图像的状态
_isActive:功能（项目）{
return item.active==true？'active'：''；
},
_选择图像：功能（项目）{
如果（_isMobile）{
返回项目。小；
}否则{
返回项目。大型；
}
}
});
Polymer({
is: 'carousel',
behaviors: [
Polymer.IronResizableBehavior
],
listeners: {
'iron-resize': '_onIronResize'
},
properties: {
img1: { type: Image, notify: true },
img2: { type: Image, notify: true },
},
_onIronResize: function() {
var windowsize = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if( windowsize > 600 ) {
this.img1 = "//large-1.jpg";
this.img2 = "//large-2.jpg";
} else {
this.img1 = "//small-1.jpg";
this.img2 = "//small-2.jpg";
}
},
});
我知道有两种选择可以让你更轻松。HTML5
picture