Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Jak zrobić by zdjęcia wczytywały się przed wczytaniem strony?
abdiel
post
Post #1





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

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

Witam serdecznie (IMG:http://forum.php.pl/style_emoticons/default/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ść (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Mam nadzieję, ze nie pogmatwałem za bardzo.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
erafaelmi
post
Post #2





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

Posty w temacie
- abdiel   Jak zrobić by zdjęcia wczytywały się przed wczytaniem strony?   6.03.2007, 16:45:19
- - jaco   Mozna zastosowac tzw. preloader ale obawiam sie, z...   6.03.2007, 17:17:17
- - dr_bonzo   Preloader: dozywocie + mundurek szkolny abdiel: t...   6.03.2007, 20:00:22
- - Zajec   Co można ewentualnie zrobić, to skorzystać z width...   7.03.2007, 00:08:57
- - abdiel   Chyba macie rację i nie popełnię tej zbrodni Zast...   9.03.2007, 01:32:13
- - legorek   Żadnych preloaderów! Można ugryźć z trochę in...   9.03.2007, 02:16:04
- - erafaelmi   Preloader do ładowania obrazków, images - pokazuje...   17.02.2008, 22:53:52
- - punkomuzykant   erafaelmi jak patrzę na ten kod to jestem pewien ż...   18.02.2008, 14:13:50

« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 26.01.2026 - 11:26
Powered By IP.Board © 2026  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn