1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

js / Firefox: Bildwechsel vor vorherstendem Skript

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Migu, 26.02.08.

  1. Migu

    Migu Kaiser Wilhelm

    Dabei seit:
    14.02.04
    Beiträge:
    175
    Hallo Zusammen

    Habe ein dringendes JavaScript-Problem:

    In der Gallerie http://server14.cyon.ch/~michaels/cms/website.php?id=/de/portfolio/spontaneous.htm soll ein Wechsel der Bilder mittels Klick auf die Thumbnails oder auf die Pfeiltasten stattfinden.

    Wie in Safari korrekt ausgeführt, hat der Wechsel folgende Reihenfolge:

    1. Das aktuelle Bild wird ausgeblendet, indem es durch ein transparentes GIF ersetzt wird. Somit erscheint das darunter liegende, animierte PNG
    2. Die Pfeile werden ausgeblendet
    3. Der Name des Kunden wird geändert (nicht relevant für das Problem)
    4. Die Höhe und Breite des neuen Bildes werden berechnet (Funktion optimisePhotoSize, Script in der Datei optimisePhotoSize.js)
    5. Das neue Bild wird geladen und angezeigt
    6. Die Pfeile werden eingeblendet
    7. Das neue Bild wird angezeigt

    In Firefox gibt es Probleme. Das neue Bild wird sofort geladen, bevor Höhe oder Breite berechnet wurde oder bevor die Pfeile ausgeblendet werden. DIes hat zur Folge, dass das neue Bild zuerst in den falschen Dimensionen dargestellt werden, dass die Pfeile zuerst falsch gesetzt sind (zum Teil im Bild) und dass das dahinter liegende, animierte PNG nie ersichtlich wird.

    Ich hab dann mal versucht am Ende des Scripts optimisePhotoSize.js eine Variable zu setzen und diese im photoSwitcher.js zu ändern, damit das Script photoSwitcher.js gezwungen wird, zu warten, bis da Script optimisePhotoSize.js ausgeführt wurde. Merkwürdigerweise hat es mal kurz geklappt, nachdem ich aber den Firefox neu startete funktionierte es nicht mehr.

    Um Hilfe wäre ich sehr dankbar!

    photoSwitcher.js (ruft Funktion optimisePhotoSize.js auf):
    Code:
    function showPic (arrayID,placeholderImage,placeholderText,scale,setNewSource,source) {
    
    
    //display="none" of image useless for displaying loading.gif while new image is loading because Firefox processes script before new source is fully loaded
    document.getElementById(placeholderImage).src = "../html/img/pool/transparentImage.gif";
    
    switch(arrayID) {
    
    case 'next' :
    if (displayedImage < imageSourceList.length - 1)
    { displayedImage++; };
    break;
    
    case 'previous' :
    if (displayedImage > 0)
    { displayedImage--; };
    break;
    
    //when clicking on thumbnail
    default :
    displayedImage = arrayID;
    }
    
    //test whether behaviour for onclick event is supported by browser
    if (document.getElementById) {
    
    //scale image and change #clientLink for #portfolio and #home but not for #pdf
    if (scale == "scale"){
    
    //arrows are displayed after image with new width is loaded
    document.getElementById("swapImage").style.visibility = "hidden";
    
    if (imageClientLinkList[displayedImage] && imageClientNameList[displayedImage]) {
    
    document.getElementById("clientLink").href = imageClientLinkList[displayedImage];
    document.getElementById("clientLink").innerHTML = imageClientNameList[displayedImage];
    document.getElementById(placeholderText).style.visibility = "visible";
    
    } else if (imageClientNameList[displayedImage]) {
    
    document.getElementById("clientLink").href = "javascript: void(0)";
    document.getElementById("clientLink").innerHTML = imageClientNameList[displayedImage];
    document.getElementById(placeholderText).style.visibility = "visible";
    
    } else {
    
    document.getElementById(placeholderText).style.visibility = "hidden";
    
    }
    
    optimisePhotoSize(imageSourceList[displayedImage],placeholderImage);
    
    // Firefox changes source (see below) before size is calculated because it executes this script before function optimisePhotoSize is called, therefore it must be forced to wait until function is proceed
    var test = FirefoxDontProceedUntilFunctionIsExecuted * 2;
    
    }
    
    
    document.getElementById(placeholderImage).src = source + imageSourceList[displayedImage];
    
    
    //scale image and change #clientLink for #portfolio and #home but not for #pdf
    if (scale == "scale"){
    
    //arrows are displayed after image with new width is loaded
    document.getElementById("swapImage").style.visibility = "visible";
    
    }
    
    //show image after being loaded, only relevant when loading page
    document.getElementById(placeholderImage).style.display = "block";
    
    return true;
    
     } else {
    return false;}
    }
    
    optimisePhotoSize.js:
    Code:
    //source: Michael Imstepf
    //date: 06/01/2008
    //purpose: scale images according to avaiable screen space
    //dependencies: style.css, imageDataLookup.js
    
    function optimisePhotoSize(fileName,placeholderImage){
    var imageHeight = imageDataLookup(fileName,"Height");
    var imageWidth = imageDataLookup(fileName,"Width");
    
    //get information
    var navigationHeight = document.getElementById('navigationOuterWrapper').offsetHeight;
    
    var viewportHeight = $(window).height();
    var viewportWidth = $(window).width();
    	
    var contentHeight = viewportHeight - navigationHeight - 40;
    var contentWidth = viewportWidth - 140; 
    
    var imageRatio = imageWidth / imageHeight;
    					
    var navigationPrimaryWidth = document.getElementById('navigationPrimary').offsetWidth;
    
    //calculate ideal height
    while ( ((imageHeight > 50) && (imageHeight > contentHeight)) || ((imageHeight > 50) && ((imageHeight * imageRatio) > contentWidth)))
    {imageHeight--;}
    
    //set height of image
    document.images[placeholderImage].style.height = imageHeight + 'px';
    //images in Firefox are displayed before size is calculated, therefore element must be hidden at first
    //document.getElementById(placeholderImage).style.display = "block";
    
    
    //set outer width of thumbnail bar respecting user determined font size by reading size of #navigation_primary (imageWidth + (.3/2) * this.navigationPrimaryWidth on each side for buttons)
    /*document.getElementById("thumbnails").style.width = (imageHeight * imageRatio) + (0.3 * navigationPrimaryWidth) + 'px';*/
    //images in Firefox are displayed before size is calculated, therefore element must be hidden at first (but must be displayed to calculate correct height of #navigationOuterWrapper
    //document.getElementById("thumbnails").style.visibility = "visible";
    
    
    //set inner width of thumbnail bar
    /* document.getElementById("thumbnailsOuterWrapper0").style.width = (imageHeight * imageRatio) +'px';
    document.getElementById("thumbnailsInnerWrapper0IncreaseWidth").style.width = (imageHeight * imageRatio) + (0.18 * navigationPrimaryWidth) + 'px'; don't go wider than right border of window to avoid its horizontal scrollbar */
    
    
    //only set arrows in #thumbnail if thumbnails overlap available space within #thumbnails (1000px)
    var thumbnailsInnerWrapper0Width = document.getElementById('thumbnailsInnerWrapper0').offsetWidth;
    //#thumbnails minus padding of arrows
    var thumbnailsWidth = document.getElementById('thumbnails').offsetWidth * 0.9;
    
    if(thumbnailsInnerWrapper0Width > thumbnailsWidth) {
    document.getElementById('lineup0').style.visibility = "visible";
    document.getElementById('linedown0').style.visibility = "visible";
    }
    
    
    //set size of photo navigation using the same total width as #thumbnails calculated above
    /* document.getElementById("swapImage").style.width = (imageHeight * imageRatio) + (0.3 * navigationPrimaryWidth) + 'px';*/
    document.getElementById("swapImage").style.height = imageHeight + 'px';
    document.getElementById("swapImage").style.marginTop = -imageHeight + 'px';
    document.getElementById("previousImage").style.height = imageHeight + 'px';
    document.getElementById("nextImage").style.height = imageHeight + 'px';
    document.getElementById("previousImageArrow").style.marginLeft = (contentWidth - (imageHeight * imageRatio)) / 2 - 20 + 'px';
    document.getElementById("nextImageArrow").style.marginRight = (contentWidth - (imageHeight * imageRatio)) / 2 - 20 + 'px';
    
    
    
    //images in Firefox are displayed before size is calculated, therefore element must be hidden at first
    //document.getElementById("swapImage").style.display = "block";
    
    // Firefox changes source (see below) before size is calculated because it executes this script before function optimisePhotoSize is called, therefore it must be forced to wait until function is proceed
    FirefoxDontProceedUntilFunctionIsExecuted = Math.floor(Math.random() * (.5 + 1));
    }
    
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <!-- Head START -->
    <head>
    <title>Michael Sieber Switzerland |  Photographer: Portfolio - Spontan</title>
    
    <!-- Meta START -->
    <meta http-equiv="expires" content="0" />
    <meta name="copyright" content="michaelimstepf.com (c) 2007" />
    <meta name="author" content="Michael Imstepf" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="all" />
    <meta http-equiv="content-language" content="de" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- Meta END -->
    
    <!-- Script START -->
    <!--<script type="text/javascript" src="../html/script/firebug/firebug.js"></script>-->
    <script type="text/javascript" src="../html/script/maximiseWindow.js"></script>
    <!-- Script END -->
    
    <!-- Stylesheet Screen START -->
    <style type="text/css" media="screen">
    @import url(../html/style/screen/screen.css);
    </style>
    <!-- Stylesheet Screen END -->
    
    
    <!-- Stylesheet Print START -->
    <style type="text/css" media="print">
    @import url(../html/style/print/print.css);
    </style>
    <!-- Stylesheet Print END -->
    
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    
    <!-- openEngine Comment START -->
    <style type="text/css">
    .oe_comment { display:none; }
    </style>
    <!-- openEngine Comment END -->
    <script type="text/javascript" src="../html/script/eventsManager.js"></script>
    <script type="text/javascript" src="../html/script/DHTML3API.js"></script>
    <script type="text/javascript" src="../html/script/imageDataLookup.js"></script>
    <script type="text/javascript" src="../html/script/optimisePhotoSize.js"></script>
    <script type="text/javascript" src="../html/script/scrollButtonsHorizontal.js"></script>
    <script type="text/javascript" src="../html/script/jquery-1.2.2.min.js"></script>
    <script type="text/javascript" src="../html/script/opacityThumbnailBar.js"></script>
    <script type="text/javascript" src="../html/script/photoSwitcher.js"></script>
    <script type="text/javascript" src="../html/script/showElementsWhenJSEnabled.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    
    //for photoSwitcher.js
    displayedImage=0;
    
    
    //fill array with names of images
    imageSourceList = new Array("PortSpontImg_001.jpg", "PortSpontImg_002.jpg", "PortSpontImg_003.jpg", "PortSpontImg_004.jpg", "PortSpontImg_005.jpg", "PortSpontImg_006.jpg", "PortSpontImg_007.jpg", "PortSpontImg_008.jpg", "PortSpontImg_009.jpg", "PortSpontImg_010.jpg", "PortSpontImg_011.jpg", "PortSpontImg_012.jpg", "PortSpontImg_013.jpg", "PortSpontImg_016.jpg", "PortSpontImg_015.jpg");
    
    //fill array with height of images
    imageHeightList = new Array(1000, 664, 1000, 660, 1000, 1000, 590, 1000, 664, 1100, 700, 800, 1000, 1000, 1000);
    
    //fill array with width of images
    imageWidthList = new Array(800, 1000, 700, 1000, 700, 800, 1000, 800, 1000, 800, 1000, 1000, 800, 800, 800);
    
    //fill array with name of clients
    imageClientNameList = new Array("SWISS RE", "CHIQUITA BANANA COMPANY", "DIE SCHWEIZERISCHE POST", "DIE SCHWEIZERISCHE POST", "PFLEGEZENTRUM BAAR", "DIE SCHWEIZERISCHE POST", "DIE SCHWEIZERISCHE POST", "DIE SCHWEIZERISCHE POST", "CHIQUITA BANANA COMPANY", "SWISS RE", "PFLEGEZENTRUM BAAR", "DIE SCHWEIZERISCHE POST", "", "", "");
    
    //fill array with links to clients
    imageClientLinkList = new Array("http://www.swissre.ch", "http://chiquita.ch", "https://shop.post.ch/PostShop/default.aspx?ph=0", "https://shop.post.ch/PostShop/default.aspx?ph=0", "flegezentrum-baar.ch/", "http://post.ch", "https://shop.post.ch/PostShop/default.aspx?ph=0", "https://shop.post.ch/PostShop/default.aspx?ph=0", "http://chiquita.ch/", "http://swissre.com/", "http://www.pflegezentrum-baar.ch/", "https://www.postmail.ch/de/index_pm.htm", "", "", "");
    
    	//]]>
    </script>
    
    </head>
    <!-- Head END -->
    
    
    <body id="portfolio" onload="return showPic(0,'photo','client1de','scale','do not set new source','../html/img/pool/')">
    
    <div id="navigationOuterWrapper"> <div id="navigationInnerWrapper">
    <div id="navigationPrimary">
    <ul>
    <li><a href="website.php?id=/de/index.htm">MICHAEL SIEBER</a></li>
    <li>|</li><li><a href="website.php?id=/de/portfolio/portfolio.htm" class="high">PORTFOLIO</a></li>
    <li>|</li><li><a href="http://server14.cyon.ch/~michaels/cms/website.php?id=/de/services/send_link.htm">DIENSTE</a></li>
    <li>|</li><li><a href="website.php?id=/de/contact/contact.htm">KONTAKT</a></li>
    </ul>
    </div>
    <div id="navigationSecondary">
    <ul>
    <li><a href="website.php?id=/de/portfolio/spontaneous.htm" class="high">SPONTAN</a></li><li>|</li>
    <li><a href="website.php?id=/de/portfolio/accurate.htm">PRÄZIS</a></li><li>|</li>
    <li><a href="website.php?id=/de/portfolio/eloquent.htm">ELOQUENT</a></li><li>|</li>
    <li><a href="website.php?id=/de/portfolio/projekte.htm">PROJEKTE</a></li><li>|</li>
    </ul>
    </div>
    <div class="clear"></div>
    </div>
    <div class="line"></div>
    <div id="client">
    <div class="client1de" id="client1de">FÜR <a id="clientLink" href="http://www.swissre.ch">SWISS RE</a></div></div>
    
    <div id="content">
    
    
    
    
    <div id="thumbnails">
    <img src="../html/img/pool/scrollButtonLeft.png" id="lineup0" class="lineup" alt="scroll left" />
    <img src="../html/img/pool/scrollButtonRight.png" id="linedown0" class="linedown" alt="scroll right" />
    
    
    <div class="thumbnailsOuterWrapper0">
    
    <div id="thumbnailsInnerWrapper0IncreaseWidth">
    <div id="thumbnailsInnerWrapper0" class="thumbnailsInnerWrapper0">
    
    <a href="javascript: void(0)" onclick="return showPic(0,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_001.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(1,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_002.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(2,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_003.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(3,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_004.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(4,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_005.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(5,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_006.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(6,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_007.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(7,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_008.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(8,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_009.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(9,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_010.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(10,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_011.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(11,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_012.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(12,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_014.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(13,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_016.jpg" alt="" /></a>
    <a href="javascript: void(0)" onclick="return showPic(14,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/1_PortSpontThumb_015.jpg" alt="" /></a>
    
    </div>
    </div>
    </div>
    </div>
    
    </div>
    </div><div class="clear"></div>
    <div>
    
    <img id="loadingImage" src="../html/img/pool/loading.gif" alt="please wait while loading" title="please wait while loading" />
    
    <img id="photo" src="../html/img/pool/PortSpontImg_001.jpg" alt="SWISS RE" title="SWISS RE" />
    
    <!--  name="photo" -->
    
    
    <div id="swapImage">
    <a onclick="return showPic('previous','photo','client1de','scale','set new source','../html/img/pool/')" href="javascript: void(0)"><span id="previousImage"><img id="previousImageArrow" src="../html/img/pool/scrollButtonLeft.png" alt="previous image" title="previous image" /></span></a>
    <a onclick="return showPic('next','photo','client1de','scale','set new source','../html/img/pool/')" href="javascript: void(0)"><span id="nextImage"><img id="nextImageArrow" src="../html/img/pool/scrollButtonRight.png" alt="next image" title="next image" /></span></a>
    <div class="clear"></div>
    </div>
    
    
    
    <noscript>
    
    
    <div id="clientNoscript">
    <div class="client1de">FÜR <a href="http://www.swissre.ch">SWISS RE</a></div></div>
    
    <div id="thumbnailsNoscript">
    <div class="thumbnailsOuterWrapper0">
    <div class="thumbnailsInnerWrapper0">
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image1"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_001.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image2"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_002.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image3"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_003.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image4"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_004.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image5"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_005.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image6"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_006.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image7"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_007.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image8"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_008.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image9"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_009.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image10"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_010.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image11"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_011.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image12"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_012.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image13"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_014.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image15"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_016.jpg" alt="" title="" /></a>
    <a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image16"><img class="thumbnail" src="../html/img/pool/1_PortSpontThumb_015.jpg" alt="" title="" /></a>
    </div>
    </div>
    <div class="clear"></div>
    </div>
    
    <div><img id="photoNoscript" src="../html/img/pool/PortSpontImg_001.jpg" alt="SWISS RE" title="SWISS RE" /></div>
    <div class="clear"></div>
    
    
    </noscript>
    </div></body>
    </html>
     
    #1 Migu, 26.02.08
    Zuletzt bearbeitet: 26.02.08

Diese Seite empfehlen