Pełna wersja: Wydajne ładowanie zdjęć na strone
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?
AJAX....
Jaki AJAX... ;/
Pobierany jest offset widoczności, jeśli obiekt jest w polu widzenia - ustawia SRC obrazka na prawidłowy.
Pobierany jest offset widoczności, jeśli obiekt jest w polu widzenia - ustawia SRC obrazka na prawidłowy.
Cytat
Pobierany jest offset widoczności, jeśli obiekt jest w polu widzenia - ustawia SRC obrazka na prawidłowy.
Ciekawie to brzmi
możesz coś o tym więcej napisać, albo przynajmniej nakierować na dalszy tok myślenia? Też myślałem o ajaxie dlatego napisałem w tej kategorii, ale słabo go znam i nie mam pomysłu jak można by to zrobić.
Cytat(erix @ 10.07.2009, 14:08:23 ) 
Jaki AJAX... ;/
Pobierany jest offset widoczności, jeśli obiekt jest w polu widzenia - ustawia SRC obrazka na prawidłowy.
Pobierany jest offset widoczności, jeśli obiekt jest w polu widzenia - ustawia SRC obrazka na prawidłowy.
no tak - pobierany ofset - a za pomocą czego?? - ano za pomoca js - a czy zwróciłeś uwagę jak się wczytują obrazki?? - ano zanim obiekt nie jest wczytany jest animacja ładowania... a więc czy to nie jest rozwiązane za pomocą js?? a ajax czym jest jesli nie technologją js??
może inaczej - wyłączcie obsługę skryptów js i porównajcie rezultaty
MAm jeszcze pytanie odnosnie pozwyzszej porady. Domyślam się, że linki do obrazków które nie są w danej chwili widoczne będą musiały być gdzieś cachowane. Moje pytanie, to jaka będzie najlepsza metoda cachowania dla takiego przypadku?
Cytat
wczytany jest animacja ładowania... a więc czy to nie jest rozwiązane za pomocą js?? a ajax czym jest jesli nie technologją js??
A wiesz, czym się różni AJAX od DHTML?
Bo po Twojej wypowiedzi stwierdzam, że nie wiesz.
tak wiem ;p - tutaj w kod nie patrzałem i w sumie wystarczyło dynamiczne dodanie obrazków po przesunięciu scrola - animacja jeśli nie zostaną wczytane nowe obiekty obrazka do zmiennej...
ale jakby nie było jedno i drugie rozwiązanie to js ;p - i w sumie teraz czarek1986 pytał się gdzie to lub jak cashować ;p - a Ty tu jakbyś szukał zaczepki zamiast go nakierować ;p
linki może cashować w dowolnym obiekcje np. hide formulaża lub w jakimś wewnętrznym skrypcie przypisując tablicę do zmiennej...
i jeśli chodzi o rozwiązanie w dhtml (dla mnie większej różnicy to nie robi choć akurat tu się zapędziłem proponując ajax gdyż sam obiekt new image wystarczy
) to w skrypcie js skożystaj z tego:
http://blatek.ma.ciekawe.info/javascript/ob_image.html
przy czym będziesz już wiedział czy obrazek został dodany do zmiennej
ale jakby nie było jedno i drugie rozwiązanie to js ;p - i w sumie teraz czarek1986 pytał się gdzie to lub jak cashować ;p - a Ty tu jakbyś szukał zaczepki zamiast go nakierować ;p
linki może cashować w dowolnym obiekcje np. hide formulaża lub w jakimś wewnętrznym skrypcie przypisując tablicę do zmiennej...
i jeśli chodzi o rozwiązanie w dhtml (dla mnie większej różnicy to nie robi choć akurat tu się zapędziłem proponując ajax gdyż sam obiekt new image wystarczy
) to w skrypcie js skożystaj z tego:http://blatek.ma.ciekawe.info/javascript/ob_image.html
przy czym będziesz już wiedział czy obrazek został dodany do zmiennej
Cos mi nie wychodzi te ładowanie obrazka. Może zna ktoś jakiś gotowy skrypt który będzie działał tak jak opisałem wcześniej?
Cytat(czarek1986 @ 12.07.2009, 00:11:57 )
Cos mi nie wychodzi te ładowanie obrazka. Może zna ktoś jakiś gotowy skrypt który będzie działał tak jak opisałem wcześniej?
Zapomniałeś chyba dodać: "proszę o przeniesienie tematu do działu Gotowe Rozwiązania"
Cytat
Cos mi nie wychodzi te ładowanie obrazka. Może zna ktoś jakiś gotowy skrypt który będzie działał tak jak opisałem wcześniej?
Pokaż ten kodzik to może jakoś zaradzimy. To nie jest forum typu zróbcie-to-za-mnie, a zrób-to-sam-ale-z-naszą-pomocą.
Już sobie jakoś poradziłem i zaczeło mi działać. Teraz mam inny problem. Chodzi o to że przy przewijaniu strony czyli przy wywołaniu zdarzenia scroll za kazdym razem przeglądane są wszystkie obrazki dostępne na stronie iwyświetlane sa tylko te widoczne. Jednak zdarzenie to wywływane jest wiele razy przy kazdym nawet lekkim ruchu scrolla co wpływa negatywnie na obciążenie procesora. Czy można jakoś ograniczyć wywoływanie tego zdarzenia lub ograniczyć ilośc przeglądanych obrazków?
Kolega ~Pyciak wyraził się niejasno?
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
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
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>
<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
W IE6 chyba były inne własności od sprawdzania odległości.
Ale przecież korzystasz z jQuery, to masz metodę offset(), nie wynajduj koła na nowo. ;d
Ale przecież korzystasz z jQuery, to masz metodę offset(), nie wynajduj koła na nowo. ;d
I tak też robie, ale nie wiem czy jest w jquery tez metoda do pobierania pozycji scrolla której w tej chwili uzywam w tradycyjny sposob i prawdopodobnie przez to IE ma problemy z tym skryptem
Jest, przecież został w jakiś sposób stworzony np. plugin scrollTo.
Ponawiam moje pytanie jak można zwiększyć wydajność mojego skryptu, np. poprzez ograniczenie ilości wywoływania zdarzenia scroll?? A może jest jakiś lepszy sposób na to?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.