Ładowanie GIF (Preloader) utknie tylko w Chrome

Mam galerię na mojej stronie. Galeria zawiera 15 obrazów, z których każdy ma około 500 KB (całkowity rozmiar to 7,5 MB).Ładowanie GIF (Preloader) utknie tylko w Chrome

Ponieważ załadowanie galerii trwa chwilę (25 sekund na komputerze, trudne to zależy od połączenia), chcę, aby odwiedzający wiedział, że galeria ładuje się, a więc Ajax loading GIF.

Chcę, aby odwiedzający zobaczył ładujący się GIF, gdy tylko wejdzie na stronę galerii, do czasu, aż zdjęcia galerii zostaną pobrane i będą gotowe do wyświetlenia.

W celu osiągnięcia mój cel, to co robiłem:

To początek ciała strony galerii HTML:

<body> 
    <img src="images/ajax-loader.gif" alt="" class="hiddenPic" /> 
    <!-- loading Ajax loading GIF before all the other images -->

I to jest galeria CSS część:

#gallery { 
    background: url(images/ajax-loader.gif); 
    background-repeat:no-repeat; 
    background-attachment: fixed; 
    background-position: center;

Zasadniczo pobrany plik GIF powinien zostać pobrany, gdy tylko użytkownik wejdzie na stronę galerii, ponieważ jest to pierwszy obiekt wewnątrz <body>, który zostanie pobrany. Jednak nie jest widoczny ze względu na klasę hiddenPic.

Ta metoda powinna pomóc w sprawieniu, aby załadowany GIF był gotowy i widoczny jako tło galerii, tak szybko, jak to możliwe, dopóki nie zostaną pobrane wszystkie obrazy galerii i galeria będzie gotowa.

Jednak, GIF ładowanie nie działa poprawnie w Google Chrome; działa doskonale na Firefox & IE (bezbłędnie obracając się) - ale utknie (nie wiruje poprawnie) w Chrome, od momentu pojawienia się, aż galeria będzie gotowa.

Aktualizacja: wiem, że mogę wdrożyć lepsze galerii (jak te sugerowane w komentarzach), które wymagają mniej zasobów od użytkownika po wejściu na stronę galerii - ale ja nie rozumiem, jak to możliwe być przyczyną problemu, gdy program ładujący GIF działa doskonale w przeglądarce Firefox & IE.

Dlaczego ładowanie GIF Ajaxa nie działa poprawnie w Chrome?

Źródło

2012-08-16 amiregelz

Ładowanie strony internetowej wydaje się działać zgodnie z oczekiwaniami, nawet w Chrome (v21.0.1180.77 m). Oczywiście, gdy ładuję stronę, prezentuję ją z obrotowym GIF-em, który później zostaje zastąpiony przez galerię. Powiedziałbym, że jest dość powolny, tj. Nie widzę spinner "spin" widzę go tylko w 3 lub 4 różnych pozycjach, ale to prawdopodobnie do załadowania reszty galerii i mój komputer jest odrobinę powolny. Jednak ładuję galerię w około 5-6 sekund, a nie w ciągu 25 sekund, które sugerujesz, co może wpływać na wyniki. – Chris

Ponadto, chociaż myślę, że powinieneś bezwzględnie mieć spinner GIF, zastanawiam się, czy powinieneś ładować całą galerię od razu, z dwóch powodów: 1) spowalnia całą stronę i 2) marnuje przepustowość, ponieważ ludzie mogą nie widzieć wszystkich zdjęcia. Chciałbym zbadać proces 1) ładowania każdego obrazu, gdy jest on wybrany (więc spinacz gif dla każdego obrazu) lub 2) obciążenia powiedz pierwszy 3. Następnie, gdy uderzą w "Następny obraz" (aby pokazać obraz 2) załaduj obraz 4. Nie zobaczą żadnej różnicy, ale sprawią, że będzie ona znacznie szybsza i wydajniejsza. – Chris

Więc powód utknięcia jest taki, że ładowanie obrazów galerii zajmuje większość zasobów? Chcę sprawić, żeby ładowarka się zakręciła - GIF nie jest tak ciężki, że nie widzę powodu, dla którego utknie i nie mogę sprawić, żeby wirował poprawnie, nawet (no, tylko), kiedy obrazy są pobierane do komputera. O twojej sugestii, to brzmi jak świetny sposób, aby skrócić czas oczekiwania i sprawić, by działał szybko. Nie jestem pewien, która droga jest lepsza, ale jeśli użyję opcji no1, muszę dodać miniaturki do mojej galerii. – amiregelz

Trzeba tylko usunąć tę deklarację na linii 602:

background-attachment: fixed;

Źródło

2012-08-21 22:55:20 Knu

Zmieniłem go (teraz jest dostępny na stronie internetowej) - ale program ładujący GIF nadal blokuje się, dopóki się nie pojawi, dopóki galeria nie zostanie załadowana. – amiregelz

@amiregelz, a następnie znalazłem twój problem: sprawdź moją aktualizację. – Knu

** Wreszcie prawdziwe rozwiązanie! Działa teraz bezbłędnie:) ** Nie mogłem jednak znaleźć żadnych informacji na temat tego, dlaczego deklaracja ta zagraża temu, jak GIF wyświetla się i kręci w Google Chrome. Czy powinienem zachować nowy atrybut 'hiddenPic'? czy jest jakaś różnica? – amiregelz

Możesz spróbować za pomocą jQuery BlockUI Plugin (v2)

nadzieję, że to pomaga.

Źródło

2012-08-19 07:24:13

-1

W CSS dla #gallery

background-position: center;

Powinny być

background-position: center center;

Należy również spróbować użyć jQuery. Zobacz przykład http://yulounge.alienworkers.com/photogallery/.

Źródło

2012-08-19 08:29:35 Nadim

Jestem a strong advocate z użyciem obrazów kodowanych dataURI z base64 w tej i podobnych sytuacjach. To, co robi, skutecznie eliminuje potrzebę oddzielnego żądania http, aby pobrać gif spinnera, co oznacza, że animacja "ładowanie" jest natychmiast dostępna do renderowania. Dzięki temu wartość ulepszenia UX jest bardziej wartościowa niż kilka dodatkowych kilobajtów na górze - zwłaszcza, że arkusz stylów byłby pobrany tylko raz, a następnie buforowany przez klienta.

This fiddle jest animacja osadzona z ajaxload.info, które dodaje dosłownie mniej niż 1KB do końcowego CSS.

Należy zauważyć, że tego rodzaju osadzania zasobów nie jest obsługiwana w ogóle na IE7 (ale użytkownicy IE7 mają znacznie większe problemy do rozwiązania :)

Źródło

2012-08-20 05:33:50

Kiedy należy używać ogólnie URI danych URI w kodowanym formacie? Gdzie to szczególnie wyróżnia się? – amiregelz

@amiregelz: imo, gdy narzut kodowania jest tańszy niż oddzielne połączenia i wymagana jest wysoka reakcja - "ładowanie" gfx to klasyczny przykład, w którym nie chcesz, aby użytkownik czekał na * to *, aby załadować :) również uważam zasoby do osadzania w oparciu o to, jak często jest ono używane w witrynie, mogłoby sprawiać wrażenie trudniejszego (ikony stosowane jako częściowe tła są szczególnie trudne) i byłoby to preferowane do deklaracji css (gradienty/wzory wymagają więcej miejsca do zadeklarowania, a ponadto jest nominalnym obciążeniem obliczeniowym w porównaniu do wykorzystywania grafiki renderowanej wstępnie) –

Mój kod URI danych modułu ładującego GIF, gdy jest on kodowany z base64, jest [* bolesnie długi *] (http://jsfiddle.net/amiregelz/sx9Q4/). Czy nadal warto z niego korzystać? Widzę, że jest opóźnienie, ponieważ dekodowanie kodu base64 zajmuje trochę czasu, ale jest dość wolne ze względu na długość kodu. – amiregelz

osobiście do ładowarek i zawsze robiliśmy to w ten sposób, nie pamiętam gdzie czytam to .. Ale zawsze pracował dla mnie ..

 
$(function(){ 

$('#overlay') 
    .hide() 
    .ajaxStart(function() { 
     $(this).css("display","inline"); 
     }) 
    .ajaxStop(function() { 
     $(this).hide(); 
     }); 
});

Co to robi, jest to trwa div z id overlay i na każde żądanie AJAX, że wychodzi, sprawia, że widoczne i po wniosek ajax jest zakończony, ukrywa to.

Daj mi znać, jeśli potrzebujesz więcej kodu.

Pozdrawiam.

Źródło

2012-08-20 14:45:25 Shrayas

Czy możesz pokazać mi przykład tej metody (np. JsFiddle)? – amiregelz

Tutaj jesteś @amiregelz: http://jsfiddle.net/nWDUg/ – Shrayas

miałem również ten sam problem. Sposób, w jaki to naprawiłem, polegał na umieszczeniu gifu ładującego w jego własnym elemencie (aby zachować czystość znaczników, używaj pseudo elementu).

Teraz, zamiast korzystać z reguły tła, możesz użyć position: fixed. Oto kod, należy użyć (zakładając, że chcesz, że ładowarka gif siedzieć w środku ekranu):

#gallery:after { 
    content: ""; 
    background: url(images/ajax-loader.gif); 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 50px; /*change to the width of your image*/ 
    height: 50px; /*change to the height of your image*/ 
    margin-left: -25px; /*Make this 1/2 the width of your image */ 
    margin-top: -25px; /*Make this 1/2 the height of your image */ 
}

Nadzieja to pomaga!

Źródło

2013-06-20 18:35:36 matthewmatician

Ładowanie GIF (Preloader) utknie tylko w Chrome

Odpowiedz

Powiązane problemy