Question

我正在使用$（window）.load（）来更改缩略图库的某些图像大小，然后根据图像大小配置幻灯片。出于某种原因，代码正在执行2次。我可以告诉这个，因为在我的配置函数中，我使用jQuery将div包装在另一个div周围。但是，当我在页面加载时查看我的HTML时，会有2个相同div的实例被包装。

我使用javascript调试器来查看发生的事情和我的代码执行然后进入jquery-min.js，然后返回到我的函数，好像它是第二次调用。这是我的代码：

HTML

<?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>

的Javascript 第一个是我创建的jQuery插件

(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);

这是两次调用的函数

function 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');
    }


}



}

Answer 1

为什么使用$（window）.load（）？我问是否有特定原因。

标准的jQuery方式通过：

使用DOMReady

$(document).ready()

或者：

$(function(){

});

Answer 2

var once = false;
function configGallery() {
    if ( ! once) {
        once = true;

        // Rest of the function
    }
}

这将使它只执行一次。

$（window）.load（）正在执行2次？

2 个答案: