Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Wydajne ładowanie zdjęć na strone
czarek1986
post
Post #1





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 15.09.2008

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

Witam. Mam problem, że robie stronę na której ładować ma się dużo zdjęć co wiadomo, że może trwać dość długo. Czy wie ktoś może jak się robi takie coś jak jest np. na fotka.pl że zdjęcia ładują się dopiero wtedy gdy są widoczne na ekranie, tzn. że jeśli np. w danej chwili ze 100 zdjęć na ekranie widzimy tylko 30, to reszta nie jest ładowana razem ze stroną tylko zostanie załadowana wtedy gdy przewiniemy strone tak, że te zdjęcia będą widoczne na ekranie?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
czarek1986
post
Post #2





Grupa: Zarejestrowani
Postów: 72
Pomógł: 0
Dołączył: 15.09.2008

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

Przepraszam za zwłokę z umieszczeniem kodu, ale trochę go modyfikowałem i go zepsułem a potem wpadłem na kolejny pomysł i z opublikowaniem kodu chciałem zaczekać az zacznie mi to działać. 

Stworzyłem coś takiego

Kod
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">    

    $(document).ready(
        function() {
            var scr_height = document.body.offsetHeight;
            
            $(document).scroll(
                function() {
                    $(".box img").each(
                        function(){
                            var pos =     document.body.scrollTop;
                            var suma = pos + document.body.clientHeight;
                            var p = $(this).offset();
                            var name = $(this).attr("name");
                            
                            if(p.top < suma && p.top+230 > pos)
                            {
                                document.images[name].src = name;
                                $("p").html("height: "+p.top + "pos: "+ pos + " suma: " +suma +" "+name);
                                
                            }
                            
                        }
                    );
                    
                }
            );
            
            $(".box img").each(
                function(){
                    var pos =     document.body.scrollTop;
                    var suma = pos + document.body.clientHeight;
                    var p = $(this).offset();
                    
                    var name = $(this).attr("name");
                    /*var img = new Image();
                    img.src = name;
                    var width = img.width;
                    var height = img.height;
                    $(this).width(width);
                    $(this).height(height);*/
                    
                    if(p.top < suma && p.top+230 > pos)
                    {
                        document.images[name].src = name;
                        $("p").html("height: ");
                    }
                    
                }
            );

        }
    );
    
    
</script>

<style type="text/css">


.box {
    margin : 20px 10px;
    float : left;
}

.box img{
border : 1px solid;
height : 230px;
width : 230px;

}

#frame {
    position:fixed;
    top : 10px;
    right : 10px;
    border-width : 2px;
    border-style:solid;
    width : 200px;
    color : #4b4b4b;
    
}

</style>

</head>
<body>

    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/135252gory4.jpg">
    </div>

    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/134306pp0067.jpg">
    </div>

    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/133853wo_scn08.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/minglown/kolorowe.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/181339grafika_92_tn.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/minglown/krajobrazy.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/minglown/owoce.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/pior_picture6pior.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/pior_picture5pior.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/pior_picture3pior.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/172015s6001200.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/182345piorun.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/181824dsc03330.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/180606p1110092+.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/170646widokju5.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/170111z945.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/1705085.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/014723tecza1.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/215918rozowa_kropelka.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/211004a040725waterdrop3769.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/21085910i.jpg">
    </div>
    
    <div class="box">
        <img src="" alt="" name="http://www.obrazki.info/miniatury/2108172.jpg">
    </div>
    
    


<div id="frame">
<p></p>
</div>

</body>
</html>



tu mozna zobaczyć jak to działa http://test.antimo.pl/images2.html


Jedyny problem jaki mam teraz to że skrypt nie do konca działa w ie6. Tzn mam wrazenie, że wczytuje on wszystkie obrazki już na starcie. Nie wiem jak jest w nowszych wersjach bo nie testowałem. Jeśli można to jakoś ulepszyć to proszę o porady (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)  

Ten post edytował czarek1986 13.07.2009, 14:15:41
Go to the top of the page
+Quote Post

Posty w temacie
- czarek1986   Wydajne ładowanie zdjęć na strone   10.07.2009, 12:47:38
- - zegarek84   AJAX....   10.07.2009, 13:02:18
- - erix   Jaki AJAX... ;/ Pobierany jest offset widoczności...   10.07.2009, 13:08:23
|- - zegarek84   Cytat(erix @ 10.07.2009, 14:08:23 ) J...   10.07.2009, 14:01:46
- - czarek1986   CytatPobierany jest offset widoczności, jeśli obie...   10.07.2009, 13:33:29
- - czarek1986   MAm jeszcze pytanie odnosnie pozwyzszej porady. Do...   10.07.2009, 14:40:15
- - erix   Cytatwczytany jest animacja ładowania... a więc cz...   10.07.2009, 15:24:21
- - zegarek84   tak wiem ;p - tutaj w kod nie patrzałem i w sumie ...   10.07.2009, 15:48:38
- - czarek1986   Cos mi nie wychodzi te ładowanie obrazka. Może zna...   12.07.2009, 00:11:57
|- - fifi209   Cytat(czarek1986 @ 12.07.2009, 00:11...   12.07.2009, 00:34:40
- - Pyciak   CytatCos mi nie wychodzi te ładowanie obrazka. Moż...   12.07.2009, 12:01:29
- - czarek1986   Już sobie jakoś poradziłem i zaczeło mi działać. T...   12.07.2009, 19:58:05
- - erix   Kolega ~Pyciak wyraził się niejasno?   12.07.2009, 22:54:52
- - czarek1986   Przepraszam za zwłokę z umieszczeniem ko...   13.07.2009, 12:55:41
- - erix   W IE6 chyba były inne własności od sprawdzania odl...   13.07.2009, 14:43:47
- - czarek1986   I tak też robie, ale nie wiem czy jest w jquery te...   13.07.2009, 17:19:56
- - erix   Jest, przecież został w jakiś sposób stworzony np....   13.07.2009, 18:10:05
- - czarek1986   Ponawiam moje pytanie jak można zwiększyć wydajnoś...   14.07.2009, 10:55:11

« Następny starszy · AJAX · 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: 4.10.2025 - 19:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn