[js/preloader] Ładowanie skryptu przed przesłaniem innych danych Opcje

[mokry]

Witam,
Szukałem na google i tutaj na forum ale jakoś nie bardzo mi to wyszło

Chodzi o następujący problem:
Jak wiadomo, podczas wysyłania treści strony do użytkownika najpierw przesyłane są teksty oraz obrazki a na końcu dopiero ładowane są skrypty JS dołączane z nagłówka head.
Chodzi mi tutaj dokładnie o przykład Lighbox'a. Uaktywnia się on dopiero po załadowaniu całej treści strony i zanim załadują się wszystie obrazki w galerii, po kliknięciu na dany obrazek, skrypt przenosi mnie do powiększenia obrazku zamiast wyświetlić go w lightbox'ie.
Czy idzie jakoś załadować bibliotek Lightboxa i inne pomocnicze zanim zostanie przesłana inna treść strony?

[lord_t]

.js-y nie tyle idą na końcu, co na końcu są uruchamiane;) Poczytaj o ready() we frameworku jQuery. Ewentualnie możesz też użyć mootools (DomReady)

[mokry]

w takim razie skoro uruchamiane są na końcu to nie można zainicjować klasyw body onload?

[lord_t]

No właśnie one są 'inicjowane' w onload, czyli dopiero po załadowaniu wszystkiego (łącznie z grafikami). W jQuery masz dostępne ready() - szybciej pozwala działać na dokumencie (juz wtedy kiedy drzewo DOM jest załadowane).

Powyższą tezę opieram na pierwszym linku z googla dla hasła lightbox, gdzie znalazłem taki plik:
http://www.huddletogether.com/.../lightbox.js

Powiedz czy tego używasz czy innego to postaram się poprawić kod tak, żeby działał szybciej (tzn tak jak chcesz)

[mokry]

Tak, skrypt opiera się o kod, który przedstawiłeś i korzysta z prototype oraz scriptaculous.js?load=effects
Nie wiem jednak, czy przypadkiem jQuery nie będzie powodować w konflikcie z prototype, bo z mootools nie działa :/

[lord_t]

Zrób sobie plik domready.js z następującą treścią:

Kod

// Adapted from DOM Ready extension by Dan Webb
// http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
// which was based on work by Matthias Miller, Dean Edwards and John Resig
//
// Usage:
//
// Event.onReady(callbackFunction);
Object.extend(Event, {
  _domReady : function() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;

    if (Event._timer)  clearInterval(Event._timer);
    
    Event._readyCallbacks.each(function(f) { f() });
    Event._readyCallbacks = null;
    
  },
  onReady : function(f) {
    if (!this._readyCallbacks) {
      var domReady = this._domReady;
      
      if (domReady.done) return f();
      
      if (document.addEventListener)
        document.addEventListener("DOMContentLoaded", domReady, false);
        
        /*@cc_on @*/
        /*@if (@_win32)
            var dummy = location.protocol == "https:" ?  "https://javascript:void(0)" : "javascript:void(0)";
            document.write("<script id=__ie_onload defer src='" + dummy + "'><\/script>");
            document.getElementById("__ie_onload").onreadystatechange = function() {
                if (this.readyState == "complete") { domReady(); }
            };
        /*@end @*/
        
        if (/WebKit/i.test(navigator.userAgent)) {
          this._timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) domReady();
          }, 10);
        }
        
        Event.observe(window, 'load', domReady);
        Event._readyCallbacks =  [];
    }
    Event._readyCallbacks.push(f);
  }
});

Dołącz powyższy plik do strony.

Następnie w pliku lightbox.js zakomentuj linię (którą znajdziesz na końcu):

Kod

addLoadEvent(initLightbox);    // run initLightbox onLoad

A za nią wstaw taką:

Kod

Event.onReady(initLightbox);

[mokry]

Mój kod lightboxa wygląda tak:

http://centrumuslugjubilerskich.pl/js/lightbox.js

I nie widzę tutaj linijki którą podałeś aby zamienić... Sorki za konflikt wersji pliku.

[lord_t]

To łap:

Zrób wszystko jak pisałem w poprzed. poście, tylko zakomentuj ostatnią linię:

Kod

Event.observe(window, 'load', initLightbox, false);