图像宽度 100% 事件
img width 100% event
单击红色方块并查看控制台日志输出
如何摆脱这个setTimeout 500
黑客以获得正确的 100% 图像宽度?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Jsbin</title>
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link href="https://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html" rel="import">
<link href="https://www.polymer-project.org/components/core-animated-pages/transitions/cross-fade.html" rel="import">
<link href="https://www.polymer-project.org/components/core-animated-pages/transitions/slide-from-right.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/components/core-header-panel/core-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="https://www.polymer-project.org/components/font-roboto/roboto.html">
<style>
body {
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
</style>
</head>
<body unresolved>
<polymer-element name="to-soon" attributes="activePage">
<template>
<img src="http://sea-is-snow.appspot.com/icon/loading.gif" style="width:100%">
<span style="color:green; position:fixed; bottom:0px; right:0px; z-index:1;">TO SOON</span>
</template>
<script>
Polymer({
activePageChanged: function() {
if (this.activePage != 1) return 0
console.log(this.shadowRoot.querySelector('img').width)
setTimeout(function() {
console.log(this.shadowRoot.querySelector('img').width)
}.bind(this), 500);
},
});
</script>
</polymer-element>
<template is="auto-binding" unresolved>
<core-drawer-panel rightDrawer>
<core-header-panel main>
<core-toolbar class="core-header">
<select onchange="change();">
<option value="cross-fade-all" selected>cross-fade-all</option>
<option value="slide-from-right">slide-from-right</option>
</select>
</core-toolbar>
<core-animated-pages selected={{activePage}} class="content" onclick="stuff();" transitions="cross-fade-all" fit relative>
<section>
<div layout vertical center center-justified style="background:red;" fit>1</div>
</section>
<section>
<to-soon activePage={{activePage}}></to-soon>
</section>
</core-animated-pages>
</core-header-panel>
<core-header-panel drawer style="background:#eee; overflow:auto;">
<core-toolbar class="core-header">Hello</core-toolbar>
<div class="content">world</div>
</core-header-panel>
</core-drawer-panel>
</template>
<script>
function change() {
var s = document.querySelector('select');
document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value;
}
var up = true;
var max = 1;
function stuff() {
var p = document.querySelector('core-animated-pages');
if (up && p.selected === max || !up && p.selected === 0) {
up = !up;
}
if (up) {
p.selected += 1;
} else {
p.selected -= 1;
}
}
</script>
</body>
</html>
Polymer({
ready: function() {
addEventListener('core-animated-pages-transition-end', function () {
console.log(this.shadowRoot.querySelector('img').width)
}.bind(this));
},
});
上面的函数在这个 plunkr 中为我返回正确的宽度。
http://plnkr.co/edit/RGldJcDgn3TzlNIRg0n0?p=preview
相关文章:
- 分派点击事件并保留击键修饰符
- 模糊事件的Javascript测试
- keyup事件处理程序更改焦点不适用于快速键入
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 如何使Javascript动态html表及其上的事件
- 使用类从一个标记中双击事件
- 如何在未直接触发的情况下停止事件
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 对iPad上的点击事件反应缓慢
- 事件和状态
- Fancybox是否将Click事件静音
- 主干-不管怎样,检查事件以前是否绑定过
- 从控制器返回后Ajax启动事件激发
- 如何从画布上的某个移动事件中获取X和Y
- Jquery:未触发select事件
- JsFiddle上的鼠标事件不起作用
- 只覆盖箭头键滚动事件
- $window.ga在AngularJS事件中未定义
- 图像宽度 100% 事件
- console.log和进度事件-仅在100%时显示