Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Jak zrobić by zdjęcia wczytywały się przed wczytaniem strony?
abdiel
post 6.03.2007, 16:45:19
Post #1





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 26.02.2007

Ostrzeżenie: (0%)
-----

Witam serdecznie guitar.gif
Mam do Was pytanie. Chodzi o to, ze chciałbym aby podczas wczytywania się strony nie było pustych miejsc, w których powinny być zdjęcia i żeby nie trzeba było czekać na ich wczytanie.
Czasami jest tak,ze stronka sie juz załaduje i dopiero w niektórych miejscach pojawiają się fotki
Moze jest jakaś funkcja, opcja zeby temu zapomiec?
Dopiero zaczynam swoją drogę z robieniem stronek, więc proszę o wyrozumiałość smile.gif
Mam nadzieję, ze nie pogmatwałem za bardzo.
Go to the top of the page
+Quote Post
jaco
post 6.03.2007, 17:17:17
Post #2





Grupa: Zarejestrowani
Postów: 115
Pomógł: 1
Dołączył: 15.01.2003

Ostrzeżenie: (0%)
-----

Mozna zastosowac tzw. preloader ale obawiam sie, ze nie tylko ja podpisalbym sie pod ustawa, ktora za takie praktyki przewiduje dozywocie winksmiley.jpg

Daj temu spokoj i pozwol sie ladowac stronom tak jak tego chca jej uzytkownicy a przynajmniej ich przegladarki.
Go to the top of the page
+Quote Post
dr_bonzo
post 6.03.2007, 20:00:22
Post #3





Grupa: Przyjaciele php.pl
Postów: 5 724
Pomógł: 259
Dołączył: 13.04.2004
Skąd: N/A

Ostrzeżenie: (0%)
-----

Preloader: dozywocie + mundurek szkolny

abdiel: to jest normalne;
i masz wybor: albo text albo grafika pojawi sie pierwsza; albo oba pojawia sie na koncu == pusta strona, user ja zamyka.

i przenosze


--------------------
Nie lubię jednorożców.
Go to the top of the page
+Quote Post
Zajec
post 7.03.2007, 00:08:57
Post #4





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

Co można ewentualnie zrobić, to skorzystać z width oraz height przy wstawianiu obrazków. Przeglądarka zarezerwuje wtedy dla nich miejsce, co pozowli uniknąć skoków treści strony.

Ale nawet nie próbuj blokować wyświetlenia strony przed całkowitym załadowaniem. To chyba najgorsze rozwiązanie.
Go to the top of the page
+Quote Post
abdiel
post 9.03.2007, 01:32:13
Post #5





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 26.02.2007

Ostrzeżenie: (0%)
-----

Chyba macie rację i nie popełnię tej zbrodni winksmiley.jpg
Zastanawiałem się tylko, czy tak nei będzie lepiej, ale macie rację, to strasznie irytujące smile.gif
Go to the top of the page
+Quote Post
legorek
post 9.03.2007, 02:16:04
Post #6





Grupa: Zarejestrowani
Postów: 411
Pomógł: 35
Dołączył: 27.06.2004
Skąd: Kraków

Ostrzeżenie: (0%)
-----

Żadnych preloaderów!

Można ugryźć z trochę innej strony:

- lepiej przygotowac grafikę. Dobrać odpowiedni format i stopień kompresji (jpeg) czy też liczbę kolorów w (gif, png). Mnie krew zalewa kiedy widze jakieś proste logo z dwoma kolorami zapisane w jpegu w png zajmowałoby 10 razy mniej i wyglądało 5 razy lepiej.

- odchudzić kod, żeby strona się szybciej wczytywała

lub kupić sobie szbsze łącze winksmiley.jpg


--------------------
Absurd, pierogi i wtorki.
Go to the top of the page
+Quote Post
erafaelmi
post 17.02.2008, 22:53:52
Post #7





Grupa: Zarejestrowani
Postów: 15
Pomógł: 1
Dołączył: 8.03.2007

Ostrzeżenie: (0%)
-----

Preloader do ładowania obrazków, images - pokazuje obracajace się kuleczko (dowolny gif) na każdej miniaturce obrazka podczas ładowania:
Demo: demo preloader - może zaistnieć, że trzeba będzie odswieżyć stronę bo wstawione są duże obrazki dla demonstracji
Opis: opis images preloader - artykuł

Gotowy kod strony:
należy wstawić plik preloader.js do kodu html: <script type="text/javascript" src="preloader.js"></script>
oraz w stylach ewentualni zmienić ścieżkę dostepu do loading.gif: background: url(images/loading.gif) no-repeat center;
Loadery, grafiki są dostępne Ajax Indicators

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <script type="text/javascript" src="preloader.js"></script>
  6. <script type="text/javascript">
  7. window.addEvent('domready', function() {
  8.  
  9. 	var p = new Preloader();
  10. 	$$('.preloadImage img').each(function(img) {
  11. 		p.addEventOnLoad(img.src, function() {
  12. 			img.getParent().setStyle('background', 'none');
  13. 			img.setStyle('opacity', 0)
  14. 			img.style.display = 'block';
  15. 			img.effect('opacity').start(0,1);
  16. 		});
  17. 		p.addToQueue(img.src);
  18. 	});
  19.  
  20. });
  21. </script>
  22. <title>Image Preloader</title>
  23. <style type="text/css">
  24.  
  25. body {
  26. 	font-family: Arial, Helvetica, sans-serif;
  27. 	background-color:#efefef;
  28. }
  29.  
  30. #main {
  31. 	background: #fff;
  32. 	width: 550px;
  33. 	padding: 25px 0 25px 25px;
  34. 	margin: 25px auto;
  35. 	overflow: hidden;
  36. }
  37.  
  38. .preloadImage {
  39. 	background: url(images/loading.gif) no-repeat center;
  40. 	float: left;
  41. 	margin: 25px 25px 0 0;
  42. }
  43.  
  44. .preloadImage, .preloadImage img {
  45. 	width: 250px;
  46. 	height: 166px;
  47. }
  48.  
  49. .preloadImage img {
  50. 	display: none;
  51. }
  52.  
  53. h1 { font-size:16px; color:#333333;}
  54. p { font-size:12px;}
  55.  
  56. </style>
  57. </head>
  58. <body>
  59. <div id="main">
  60.  
  61. <h1>Image Preloader</h1>
  62.  
  63. Please note: Every image in the demo is about 500kb.
  64.  
  65.  
  66.     <div class="preloadImage"><img src="images/01.jpg" title="sample1" alt="" /></div>
  67.     <div class="preloadImage"><img src="images/02.jpg" title="sample2" alt="" /></div>
  68.     <div class="preloadImage"><img src="images/03.jpg" title="sample3" alt="" /></div>
  69.     <div class="preloadImage"><img src="images/04.jpg" title="sample4" alt="" /></div>
  70.  
  71.  
  72. </div>
  73. </body>
  74. </html>
[HTML] pobierz, plaintext



Plik preloader.js

Kod
/*     Class:
        Preloader

    Author:
        Neil Jenkins
        
    Version:
        1.0 (2007-09-06)
        
    Description:
        Javascript class for preloading images sequentially

    Usage:
        Calling new Preloader() returns an new Preloader instance.
        e.g. var p = new Preloader();

        Public interfaces:

        addToQueue(String: imageSrc)
            This method adds the imageSrc to the back of the queue.
            e.g. p.addToQueue('img.jpg');
        
        addToFrontOfQueue(String: imageSrc)
            This method adds the imageSrc to the front of the queue; it will be loaded next,
            before any other images currently in the queue.
            e.g. p.addToFrontOfQueue('img.jpg');
        
        removeFromQueue(String: imageSrc)
            This method removes the imageSrc from the queue if it is not already loaded.
            e.g. p.removeFromQueue('img.jpg');

        addEventOnLoad(String: imageSrc, Function: callbackFunction)
            This method adds a function to be called when the image with source imageSrc loads,
            The function will be bound to the image object (i.e. the keyword 'this' will refer to the image).
            e.g. p.addEventOnLoad('img.jpg', functionToShowThisImage);
            
        flushQueue()
            Removes all images yet to be loaded from the queue
        
        stopAllEvents()
            Removes all events set with addEventOnLoad; even if the image loads, no event
            will fire unless you add a new one.
        
        isLoaded(String: imageSrc)
            Returns a boolean value indicating whether the image from this source has loaded.
        
        isInQueue(String: imageSrc)
            Returns true if the image is in the queue or is currently being loaded.
            Otherwise returns false.
        
        priorityLoadWithCallback(String: imageSrc, Function: callbackFunction)
            Adds the image to the front of the queue and registers the callback function to fire when the
            image has loaded. If the image is already loaded, the function will be called immediately.
            Returns true if the image is already loaded, false if not.

    Dependencies:
        mootools: http://mootools.net
*/

var Preloader = new Class({

    initialize: function() {
        this._currentlyLoading = '';
        this._loading = false;
        this._imgQueue = [];
        this._loadEvents = {};
        this._loadedImages = {};
    },
    
    addToQueue: function(src) {
        if (this.isLoaded(src) || this.isInQueue(src)) return;
        this._imgQueue.push(src);
        if (!this._loading) this._loadNext();
        return this;
    },

    addToFrontOfQueue: function(src) {
        if (this.isLoaded(src)) return false;
        if (this._currentlyLoading == src) return true;
        this.removeFromQueue(src);
        this._imgQueue.unshift(src);
        if (!this._loading) this._loadNext();
        return true;
    },

    removeFromQueue: function(src) {
        this._imgQueue.remove(src)
        return this;
    },
    
    addEventOnLoad: function(src, fn) {
        this._loadEvents[src] = fn;
        return this;
    },
    
    flushQueue: function() {
        this._imgQueue = [];
        return this;
    },
    
    stopAllEvents: function() {
        this._loadEvents = {};
        return this;
    },
    
    isLoaded: function(src) {
        return !!this._loadedImages[src];
    },
    
    isInQueue: function(src) {
        return (this._currentlyLoading == src || this._imgQueue.contains(src));
    },
    
    priorityLoadWithCallback: function(src, fn) {
        this.addEventOnLoad(src, fn);
        if (!this.addToFrontOfQueue(src)){
            this._fireLoadEvent(src); // Already loaded
            return true;
        }
        return false;
    },
    
    _fireLoadEvent: function(src) {
        if (this._loadEvents[src]) this._loadEvents[src].call(this._loadedImages[src]);
        this._loadEvents[src] = null;
    },
    
    _loadNext: function() {
        if (this._imgQueue.length == 0) {
            this._currentlyLoading = '';
            return this._loading = false;
        }
        this._loading = true;
        this._currentlyLoading = this._imgQueue.shift();
        var img = new Element('img');
        var preloader = this;
        img.addEvent('load', function() {
            preloader._loadedImages[this.src] = this;
            preloader._currentlyLoading = '';
            preloader._fireLoadEvent(this.src);
            setTimeout(function() {
                preloader._loadNext();
            }, 0); //setTimeout for Opera; stops this hogging the javascript thread.
            this.removeEvent('load', arguments.callee);
        });
        img.src = this._currentlyLoading;
    }

});
Go to the top of the page
+Quote Post
punkomuzykant
post 18.02.2008, 14:13:50
Post #8





Grupa: Zarejestrowani
Postów: 147
Pomógł: 3
Dołączył: 28.12.2007
Skąd: toronto

Ostrzeżenie: (0%)
-----

erafaelmi jak patrzę na ten kod to jestem pewien że zdecydowanie wolałbym użyć do tego flasha. Tyle kodu żeby ostatecznie uzyskać zwykłego gif-a przed załadowaniem zdjęcia to jakaś masakra. Osobiście zrobiłbym to mniej więcej tak
- malutki preloader % bez właściwości pikselowych tak by ładnie dopasował się do div-a w którym byłby zamieszczony
+ malutki skrypcik przekazujący temu flashowi które zdjęcie ma załadować
robiłem coś podobnego i sam flashpreloader zajmował po wygenerowaniu 600 ileś bajtów w najprostszej postaci
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.06.2025 - 07:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn