Javascript $（window）.load（）执行了2次？
我正在使用$（window）.load（）更改缩略图库的一些图像大小，然后根据图像大小配置幻灯片。由于某种原因，代码执行了2次。我可以这么说，因为在我的配置函数中，我使用jQuery将一个div包装在另一个div周围。但是，当我在页面加载时查看HTML时，有两个相同div的实例被包装 我使用javascript调试器查看发生了什么，我的代码执行，然后进入jquery-min.js，然后返回到我的函数，就像第二次调用它一样。这是我的密码： HTMLJavascript $（window）.load（）执行了2次？,javascript,jquery,html,Javascript,Jquery,Html,我正在使用$（window）.load（）更改缩略图库的一些图像大小，然后根据图像大小配置幻灯片。由于某种原因，代码执行了2次。我可以这么说，因为在我的配置函数中，我使用jQuery将一个div包装在另一个div周围。但是，当我在页面加载时查看HTML时，有两个相同div的实例被包装 我使用javascript调试器查看发生了什么，我的代码执行，然后进入jquery-min.js，然后返回到我的函数，就像第二次调用它一样。这是我的密码： HTML <?php session_start()
<?php session_start(); include ('dbConfig.php'); include('main.php'); ?>
<!DOCTYPE html>
<html>
<head>
<title>Main Gallery</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!--[if IE]>
<style type="text/css">
.transblack {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
zoom: 1;
}
.transwhite {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF,endColorstr=#50FFFFFF);
zoom: 1;
}
</style>
<![endif]-->
<script>
$(window).load(function(){
$('#gallery ul li').each(function() {
var $frame = $(this).children('div');
$frame.children('img').superFit();
});
$('#gallery').css('visibility', 'visible');
configGallery();
});
$(document).ready(function(){
$('#filter').hide();
$('#photoWrap').hide();
$('#gallery').css('visibility', 'hidden');
});
</script>
</head>
<body>
<div id="mainWrap">
<?php include('adminPanel.php'); ?>
<div id="photoWrap">
<div id="controlLeft" class="control"></div>
<div id="slideShow">
<div id="slideContainer">
<?php
if(isset($_GET['c']) && isset($_GET['p']))
{
if(isAuthentic($_GET['c'], $_GET['p']))
{
getSlideshow($_GET['c']);
}else{
getSlideshow();
}
}else{
getSlideshow();
}
?>
</div>
</div>
<div id="controlRight" class="control"></div>
</div>
<div id="container">
<div id="filter" class="transblack"></div>
<div id="titleWrap"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
<div id="clientHolder">
<span id="clientSelector">Select Gallery: <select onchange="getGallery(document.getElementById('clientSelect').value)" id="clientSelect">
<option value="-2">--Select--</option>
<option value="-1">Public Gallery</option>
<?php
if(isset($_GET['c']) && isset($_GET['p']))
{
if(isAuthentic($_GET['c'], $_GET['p']))
{
getClients($_GET['c']);
}else{
getClients();
}
}else{
getClients();
}
?>
</select></span>
</div>
<div id="gallery">
<ul>
<?php
if(isset($_GET['c']) && isset($_GET['p']))
{
if(isAuthentic($_GET['c'], $_GET['p']))
{
getMain($_GET['c']);
}else{
echo "<h2>The password you entered was incorrect</h2>";
}
}else{
getMain();
}?>
</ul>
</div>
</div>
</div>
<script src="js/md5.js" type="text/javascript"></script>
<script src="js/helper.js" type="text/javascript"></script>
<script src="js/superFit.js" type="text/javascript"></script>
</body>
</html>
主廊
$（窗口）。加载（函数（）{
$（#gallery ul li'）。每个（函数（）{
var$frame=$（this.children（'div'）；
$frame.children（'img'）.superFit（）；
});
$（'#gallery'）.css（'visibility'，'visible'）；
configGallery（）；
});
$（文档）.ready（函数（）{
$（“#过滤器”）.hide（）；
$（'#photoWrap'）.hide（）；
$（'#gallery'）.css（'visibility'，'hidden'）；
});
选择库：
--挑选--
公众席
(function($) {
$.fn.superFit = function(options) {
var $this = $(this);
var parent = $this.parent();
var parentW = parent.width();
var parentH = parent.height();
var imgW = $this.width();
var imgH = $this.height();
var imgRatio = imgH / imgW;
var parentRatio = parentH / parentW;
if(imgRatio < parentRatio) //We have a landscape image
{
//First set the height of image to be 100%;
$this.css('height', '100%');
imgW = $this.width();
parentW = parent.width();
//Now center the image
$this.css('margin-left', -(imgW/2)+(parentW/2));
}else{ //We have a portrait image
$this.css('width', '100%');
}
}
})(jQuery);
（函数（$）{
$.fn.superFit=函数（选项）{
var$this=$（this）；
var parent=$this.parent（）；
var parentW=parent.width（）；
var parentH=parent.height（）；
var imgW=$this.width（）；
var imgH=$this.height（）；
var imgRatio=imgH/imgW；
var parentRatio=parentH/parentW；
if（imgRatiofunction configGallery()
{
var currentPosition;
var slides = $('.slide');
var currentSlide;
var currentImg;
var slideWidth = 720;
var numberOfSlides = slides.length;
var imgRatio;
var slideRatio = $('#slideShow').height() / slideWidth;
slides.wrapAll('<div id="slideInner"></div>');
$('.imgHolder').click(function(){
$('#filter').show();
$('#photoWrap').show();
currentPosition = $('.imgHolder').index(this);
$('#slideShow').width(slideWidth);
// Remove scrollbar in JS
$('#slideContainer').css('overflow', 'hidden');
//Change image size based on resolution
// Wrap all .slides with #slideInner div
slides.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', (slideWidth * numberOfSlides));
// Hide left arrow control on first load
manageControls(currentPosition);
$('#slideInner').css('margin-left' , slideWidth*(-currentPosition));
$('#photoWrap').css('margin-top', (screen.height/3)-($('#photoWrap').height()/3));
changeSize();
});
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='controlRight') ? currentPosition+1 : currentPosition-1;
manageControls(currentPosition);
changeSize();
$('#slideShow').width(slideWidth);
$('#slideInner').css('margin-left', slideWidth*(-currentPosition));
});
$('#filter').click(function(){
$(this).hide();
$('#photoWrap').hide();
});
// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==-1){ currentPosition = numberOfSlides-1; }
else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides){ currentPosition = 0; }
else{ $('#rightControl').show() }
}
function changeSize(){
currentSlide = $('.slide').get(currentPosition);
currentImg = $(currentSlide).children('img').first();
imgRatio = $(currentImg).height() / $(currentImg).width();
if(imgRatio < slideRatio)
{
$(currentImg).addClass('landscape');
//Vertically align
var thisHeight = $(currentImg).height();
$(currentImg).css('margin-top', ($('#slideShow').height()/2)-(thisHeight/2));
}else{
$(currentImg).addClass('portrait');
}
}
}
函数configGallery（）
{
无功电流位置；
变量幻灯片=$（'.slide'）；
无功电流；
无功电流；
var slideWidth=720；
var numberOfSlides=slides.length；
var imgRatio；
var slideRatio=$（'#slideShow'）.height（）/slideWidth；
幻灯片。wrapAll（“”）；
$（'.imgHolder'）。单击（函数（）{
$（“#过滤器”）.show（）；
$（'#photoWrap'）.show（）；
currentPosition=$（'.imgHolder'）。索引（此）；
$（“#幻灯片放映”）。宽度（幻灯片宽度）；
//删除JS中的滚动条
$（'#slideContainer'）.css（'溢出'，'隐藏'）；
//根据分辨率更改图像大小
//用#slideInner div包装所有幻灯片
slides.css({
‘float’：‘left’，
“宽度”：滑动宽度
});
//将#幻灯片内部宽度设置为所有幻灯片的总宽度
$（'slideInner'）.css（'width'，（slideWidth*numberOfSlides））；
//第一次加载时隐藏左箭头控件
管理控制（当前职位）；
$（'#slideInner'）.css（'margin-left'，slideWidth*（-currentPosition））；
$（'#photoWrap'）.css（'margin-top'，（screen.height/3）-（$（'#photoWrap'）.height（）/3））；
changeSize（）；
});
//为控件创建事件侦听器。单击
$（“.control”）
.bind（'单击'，函数（））{
//确定新位置
currentPosition=（$（this）.attr（'id'）=='controlRight'）？currentPosition+1:currentPosition-1；
管理控制（当前职位）；
changeSize（）；
$（“#幻灯片放映”）。宽度（幻灯片宽度）；
$（'#slideInner'）.css（'margin-left'，slideWidth*（-currentPosition））；
});
$（“#过滤器”）。单击（函数（）{
$（this.hide（）；
$（'#photoWrap'）.hide（）；
});
//manageControls：根据当前位置隐藏和显示控件
功能管理控制（位置）{
//如果位置是第一张幻灯片，则隐藏左箭头
如果（位置==-1）{currentPosition=numberOfSlides-1；}
else{$（'#leftControl'）.show（）}
//如果位置是最后一张幻灯片，则隐藏右箭头
如果（position==numberOfSlides）{currentPosition=0；}
else{$（'#rightControl'）.show（）}
}
函数changeSize（）{
currentSlide=$（'.slide'）.get（currentPosition）；
currentImg=$（currentSlide）.children（'img'）.first（）；
imgRatio=$（当前img）.height（）/$（当前img）.width（）；
如果（默认<滑动）
{
$（currentImg）.addClass（'landscape'）；
//垂直对齐
var thishheight=$（currentImg）.height（）；
$（currentImg）.css（'margin-top'，（$（'#slideShow'）.height（）/2）-（thishheight/2））；
}否则{
$（currentImg）.addClass（'纵向'）；
}
}
}
$(document).ready()
使用
iftruefalse是指围绕configGallery（）调用？请注意，首先触发$（document）.ready（）
，然后触发$（window）.load（）
。是的，我知道document.ready首先触发，然后加载（）。这就是我想要的。这只是奇怪的原因，当我调试时，它不断调用这行代码两次slides.wrapAll（“”）我需要它，因为我有一个照片库幻灯片，在用户单击图像缩略图之前，它首先对用户隐藏。我使用$（window）.load（）等待加载所有图像，以便调整它们的大小以适应缩略图。我可能有一个建议。听起来你的具体要求是只做一个动作
$(document).ready()
$(function(){
});