相关疑难解决方法(0)
JavaScript/JQuery:$(window).resize如何在调整大小完成后触发？
我正在使用JQuery:
$(window).resize(function() { ... });
但是,似乎如果此人通过拖动窗口边缘来手动调整其浏览器窗口的大小以使其变大或变小,则.resize上述事件将多次触发.
问题:如何在浏览器窗口调整大小完成后调用函数(以便事件仅触发一次)？
推荐指数
解决办法
查看次数
为什么jQuery会重启事件两次？
我只是注意到,只要调整浏览器窗口大小,jquery resize事件就会触发两次.我找不到任何将此列为默认行为的文档.我已经使用jQuery 1.4和1.5在最新版本的Chrome和Firefox中对此进行了测试.
有没有人看到这种行为？它有具体原因吗？
更新:如果我单击浏览器窗口上的最大化按钮一次,就会发生这种情况.我知道如果我手动将窗口拖动到不同的大小,事件将被多次触发,但最大化按钮不应该是这种情况.
使用的代码测试如下.浏览器调整大小的文本输出两次:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
$(window).resize(function(){
console.log('Browser Resized');
});
</script>
<body>
</body>
</html>
推荐指数
解决办法
查看次数
在jquery中多次触发window.resize
我在HTML文件中有以下javascript/jquery代码:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script language="javascript">
$(window).resize(function(){alert('hi');});</script>
</head>
<body>
resize me
</body>
</html>
它似乎相对直接,但是当我调整浏览器窗口大小时,我在Chrome和IE9上连续两个警报窗口,我看起来崩溃了FF5.
我错过了什么？每个维度(x/y)是一个火吗？
推荐指数
解决办法
查看次数
Bootstrap 3.0 scrollspy响应偏移
我试图让Bootstrap的scrollspy在响应式网站上可靠地工作,其中顶部导航栏的高度根据媒体/浏览器的宽度而变化.因此,不是硬编码data-offset属性的偏移量,而是通过Javascript初始化动态设置它,如下所示:
$('body').scrollspy({ offset: 70, target: '#nav' });
对于宽布局(即Bootstrap -lg),它可以正常工作,但对于较窄的布局,似乎存在"累积"偏移.换句话说,它适用于第一部分,但随后需要增加像素来激活以下部分(例如,下一个为90px,第三部分为110px等).
我尝试直接操作scrollspy对象,如下面的答案中所述: 如何在Bootstrap中设置ScrollSpy的偏移量？但无济于事.
有人可以推荐一种在响应式网站中实现scrollspy的规范方法,其中偏移量根据媒体宽度而变化吗？
附加信息:
我刚刚在两个场景中分析了scrollspy对象,结果发现当通过data-属性而不是通过JS 初始化时,偏移列表是不同的.看起来当我通过JS初始化它时,偏移数组会在一些BS响应调整发生之前填充,因此高度不同.在所有响应式内容运行后,如何触发scrollspy的初始化？BS调整布局后是否有钩子/回调？JS是否参与或者是由CSS处理的所有响应式内容？
responsive-design twitter-bootstrap scrollspy twitter-bootstrap-3
推荐指数
解决办法
查看次数
奇怪/不一致的scrollTop行为
在尝试滚动元素而不调用普通事件处理程序时,我偶然发现了这个
使用Firefox和IE10我发现scrollTop方法运行方式有一些非常奇怪的行为.例如,如果我设置scrollTopon a div和aferwards,将scroll事件处理程序绑定到同一个元素,则处理程序立即触发.从我的测试来看,这不会发生在Chrome上,这让我觉得FF和IE正在将最微小的动画应用到他们的卷轴上,或者这是某种错误.
参见JSFiddle示例.有趣的是,如果我在分配之前设置1ms的超时,问题就会消失.我想知道这里发生了什么,以及解决它的最佳方法是什么.
更新:从下面的评论却仿佛这可能被认为是正常的浏览器的行为,所以我会更新我的问题要问这是怎么回事-请引用其更详细地解释这一过程中一些有趣的文章.
推荐指数
解决办法
查看次数
避免在Chrome中的页面加载时触发调整大小事件
我注意到$.resize()jQuery 的事件在页面加载时被触发,而窗口没有任何实际的"调整大小",具体取决于浏览器.
它不仅被解雇一次,有时甚至两次.(在Chrome 30.0.1599.101 m中加载,在Opera中调整大小...)
这表现正常吗？在为所有浏览器加载网站时,有没有办法统一这种行为？
resize调整大小时我已经调用了一次(使用间隔),但这并没有解决在Chrome加载时触发事件的问题.
我无法创建一个复制此问题的小提琴,但您可以使用如下文件测试此行为:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).resize(function() {
alert("Fired!");
});
</script>
</head>
<body>
</body>
</html>
首次使用Chrome加载页面时,系统会触发此事件.任何刷新它都不会被触发.
推荐指数
解决办法
查看次数
调整包含圆的图像映射的大小
我正在尝试映射下面图片中的所有数字,我已经完成了.但现在我想根据窗口的宽度动态调整图像大小和地图.
这是相关的html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>20 Keys</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- Start of first page: #home-->
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
<img src="images/20keyslogo.jpg" width="100%">
</div><!-- /header -->
<div class="white" data-role="content" data-theme="b">
<img id="imageMaps" src="images/20keys.jpg" usemap="#20Keys" width="100%" alt="Select Key" border="0"/>
<map id="20Keys" name="20Keys">
<area shape="circle" alt="Key 1" title="" coords="41,54,31" href="" target="" />
<area shape="circle" alt="Key 2" title="" coords="41,543,31" href="" target="" />
<area …推荐指数
解决办法
查看次数
为什么javascript文件加载两次console.log和alert和jquery"click"运行两次
为什么javascript文件加载两次？
$(window).load(function() {
$(function() {
console.log('hi');
});
});
这是控制台输出:
vm和Categories都是同一个文件
问题不仅仅在于console.log,我称之为jquery"click"的任何函数都会被触发两次!
scrollingPage.js:
/**
* fullPage 1.3.1
* https://github.com/alvarotrigo/fullPage.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/
(function($) {
$('.PageData').live('mouseleave' ,function(){
window.windowScrollOF = false;
});
$('.PageData').live('mouseenter', function(){
window.windowScrollOF = true;
});
$('.CatData').live('mouseleave' ,function(){
window.windowScrollOF = false;
});
$('.CatData').live('mouseenter', function(){
window.windowScrollOF = true;
});
$.fn.fullpage = function(options) {
// Create some defaults, extending them with any options that were provided
options = $.extend({
"verticalCentered" …推荐指数
解决办法
查看次数
如何为事件监听器实现去抖动？存储事件的问题
我有去抖功能
function debounce(func, wait, immediate) {
// 'private' variable for instance
// The returned function will be able to reference this due to closure.
// Each call to the returned function will share this common timer.
var timeout;
// Calling debounce returns a new anonymous function
return function() {
// reference the context and args for the setTimeout function
var context = this,
args = arguments;
// Should the function be called now? If immediate is true
// and not …推荐指数
解决办法
查看次数
标签 统计
javascript ×8
jquery ×4
browser ×1
dom-events ×1
html ×1
imagemap ×1
jquery-1.8 ×1
resize ×1
scrollspy ×1