| Autor |
Nachricht |
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 23.03.2013 14:04
Titel Javascript wird vor dem laden der Seite ausgeführt |
  |
|
Hallo,
ich baue gerade eine Internetseite für meinen Vater, bin damit im Grunde fertig und habe nun ein Problem:
Online werden die Inhalte (Bilder in der Seitenleiste) zu langsam geladen, das jQuery-Script (custom scrollbars) wird zu früh geladen, so vermute ich, und es fehlen Bilder in besagter Leiste. Ein aktualisieren der Seite behebt das Problem, lokal tritt es auch nicht auf, wohl aber beim ersten Öffnen von der Onlineversion.
Das erste Bild der Seitenleiste existiert nicht, das ist kein Problem.
>> Link
Anbei die index.html:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Laden der genutzten Schriftart -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Figueroa Design</title>
</head>
<body>
<div id="window">
<div id="followmouse"></div> <!-- ...folgt der maus immer -->
<div id="wrapper">
<div id="kontakt">figueroa-design[at]t-online.de</div>
<div id="impressum">
<a href="">impressum</a>
</div>
<div id="top-bar">
<div id="logo"><img src="images/logo.png" width="40" height="40"/></a></div>
<div id="infos">figueroa . büro für gestaltung gmbh . 2012</div>
</div>
<div id="main">
<!-- Der weiße Hauptcontainer -->
<div class="cushycms" id="menu">
<!-- Div container mit scrollbaren Inhalten -->
<div id="stuhlliste">
<!-- Stühle -->
<div anz="4" id="news" class="menu"><a href=""><img src="images/menu/news.jpg" alt="seminario" /></a></div>
<!-- zahlreiche Inhalte, hier wurde gekürzt.. -->
<div anz="5" id="wir" class="menu"><a href=""><img src="images/menu/wir.jpg" alt="wir" /></a></div>
</div> <!-- Ende stuhlliste / Menü -->
</div> <!-- Ende menu -->
<div id="laden" style="display:none">
<div id="icon"><img src="images/menu/laden.gif"/></div>
</div> <!-- Ende "laden" -->
<div id="klickflaeche"><div id="hinweis"><img src="images/touch.png"/></div></div>
<div id="ziel"><img src="images/stuhlbilder/1/0.jpg" id="start" width="100%" height="100%"/></div>
<div id="textalt"></div>
</div> <!-- Ende main -->
</div> <!-- Ende wrapper -->
</div>
<!-- styles für jScrollPane -->
<link type="text/css" href="Scripts/scrollbalken_style.css" rel="stylesheet" media="all" />
<!-- styles allgemein -->
<link type="text/css" href="Scripts/styles_allgemein.css" rel="stylesheet" media="all" />
<!-- styles stühle/Positionierung im Menübalken -->
<link type="text/css" href="Scripts/styles_menu.css" rel="stylesheet" media="all" />
<!-- CSS style für den container "followmouse" der der maus...folgt. -->
<script type="text/javascript" src="Scripts/maus_folgen.js"></script>
<!-- jquery plugin laden -->
<script type="text/javascript" src="Scripts/jquery-bibliothek.js"></script>
<!-- mausrad plugin laden -->
<script type="text/javascript" src="Scripts/mausrad.js"></script>
<!-- jScrollPane plugin laden -->
<script type="text/javascript" src="Scripts/scrollbalken_script.js"></script>
<!-- Aktionen bei Klicks auf Menü und Container -->
<script type="text/javascript" src="Scripts/klickevents.js"></script>
<script type="text/javascript" src="Scripts/mobile_detect.js"></script>
<script type="text/javascript">
var wrapper_div = document.getElementById("wrapper"),
main_div = document.getElementById("main"),
info_div = document.getElementById("infos"),
inner_width = window.innerWidth-30;
if(inner_width<=1024) {
wrapper_div.style.width = inner_width + "px";
wrapper_div.style.height= (567*(inner_width-282)/756 + 100) + "px";
wrapper_div.style.marginLeft = -(inner_width)/2 +"px";
wrapper_div.style.marginTop = -652*inner_width/2076 +"px";
info_div.style.width = (inner_width-280) + "px";
main_div.style.width = (inner_width-2) + "px";
main_div.style.height = (567*(inner_width-280)/756) + "px";
}
</script>
<script type="text/javascript">$(document).ready(function () {$('#menu').jScrollPane()})</script>
</body>
</html> |
Bei bedarf stelle ich auch gern die einzelnen Script-Codes rein, ich denke aber, dass das Problem irgendwo hier liegt.
Vielen Dank im Voraus
|
|
| |
  |
 |
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht: 
|
Verfasst Sa 23.03.2013 19:16
Titel
|
|
|
|
Die simpelste Lösung wird wohl sein, bei den Bildern die Abmessungen mitzugeben.
|
|
| |
|
|
|
Anzeige
|
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 23.03.2013 20:59
Titel
|
|
|
die Bilder sind fast alle verschieden groß, ich hätte es gern so wenig statisch und leicht erweiterbar wie möglich (auch wenn es das im moment vermutlich nicht ist..).
An sich sollte doch javascript erst starten, wenn die seite komplett geladen ist..?
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
|
| |
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 24.03.2013 10:30
Titel
|
|
|
Danke, das scheint so zu klappen:
| Code: | | <script type="text/javascript">window.onload = $('#menu').jScrollPane()</script> |
Ich finde die Syntax sehr inkonsistent (schreibe eher C)... Warum schreibt man das hier anders (mit "=") als bei document.ready (ich weiß, das war vorher eine jQuery Funktion)
| Zitat: | | Btw. ist es ungemein unclever, die beteiligten Scripte umzubenennen. |
Ok, das ändere ich wohl noch.
| Zitat: | | IMHO ist die Scrollbar auch kaum als solche zu erkennen, wenn man nicht weiß, dass da eine sein soll. |
Sie soll nicht so aufdringlich sein  Man kriegt schon raus wie die Seite funktioniert, hoffe ich 
Zuletzt bearbeitet von Nimroy am So 24.03.2013 10:34, insgesamt 1-mal bearbeitet
|
|
| |
|
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 24.03.2013 11:03
Titel
|
|
|
|
ich fand heraus, dass window.onload eine beschreibbare eigenschaft ist, damit bin ich zufrieden.
|
|
| |
|
|
Frank Münschke
Forums-Papa
Dabei seit: 08.06.2006
Ort: Essen
Alter: 69
Geschlecht:
|
Verfasst So 24.03.2013 11:36
Titel
|
|
|
Irgendwie kommt man aber von dem ausgewählten Sitzmöbel nicht zu den dazugehörigen weiteren Produktbildern rechts und dem entsprechenden Text oben. Bei mir auf dem iPad lande ich immer eins daneben ...
--
Hat dein alter Herr die Sachen entwickelt? Dann: "Chapeau!"
|
|
| |
 |
|
elagil
Threadersteller
Dabei seit: 21.03.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 24.03.2013 12:44
Titel
|
|
|
| Zitat: | | Bei mir auf dem iPad lande ich immer eins daneben ... |
Nicht nur auf dem iPad Ich habe einen Produktordner versehentlich gelöscht, damit sind nach den ersten zwei/drei Stühlen alle folgenden um einen Ordner verschoben (wird gleich behoben)! Danke für den Hinweis
Mit der iPad Lösung bin ich aber allgemein eher unzufrieden. Ich muss wohl alles mit media queries neu bauen, von denen wusste ich aber nichts, als ich mit der seite angefangen habe (war eine art lernprojekt)..
| Zitat: | | Hat dein alter Herr die Sachen entwickelt? Dann: "Chapeau!" |
Ja das hat er!
Zuletzt bearbeitet von elagil am So 24.03.2013 13:04, insgesamt 2-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[javascript] bild nachladen ohne seite neu zu laden
JavaScript wird im IE nicht ausgeführt!
seite neu laden
javascript onload um div später zu laden
Seite will nicht laden
Seite einmal neu laden
|
|
Willkommen auf dem Portal für Mediengestalter
