Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów - fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Autor Wiadomość
chomik21m 
Blogger.Klub


Imię: Mateusz
Pomógł: 9 razy
Wiek: 25
Dołączył: 28 Kwi 2012
Posty: 193

Wysłany:    Przyciemnienie obrazka: CSS czy jQuery

Witam,

Od pewnego czasu do przyciemniania obrazków używam tego kodu CSS:

Kod

.alfa {
color: #FFF;
-moz-transition-duration: 500ms;
-moz-transition-timing-function: ease-in;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function: ease-in;
transition-duration: 500ms;
transition-timing-function: ease-in;
opacity: 0.65;
}

.alfa:hover {
opacity: 1;
}

Niemniej wszyscy polecają, aby przyciemnienie obrazka wykonać za pomocą kodu jQuery, np. taki:

Kod

<script src='jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.obrazek').css('opacity', 0.65);
$('.obrazek').css('cursor', 'pointer');

$('.obrazek').hover(function() { //kursor wchodzi
$(this).stop().animate({'opacity': 1}, &quot;slow&quot;);
},function() { //kursor wychodzi
$(this).stop().animate({'opacity': 0.65}, &quot;slow&quot;);
});
});
</script>

I tu pytanie do Was: która opcja jest lepsza i dlaczego?

Zauważyłem, że gdy strona się ładuje i zaczynają pojawiać się obrazki, to:
a) z kodem CSS pojawiają się one od razu przyciemnione.
b) z jQuery najpierw pojawiają się "normalne", a dopiero po załadowaniu niemalże całego bloga pojawiają się przyciemnione.

Dlatego wybrałem kod CSS.

PS. Oba przyciemnienia obrazka są płynne.
______________________________________________________
Felietony, w szczególności motoryzacyjne, pisane w niebanalny sposób:
http://mateuszchomicki.pl
 
  podziel się tym postem na:




Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Lukem 
Blogowicz.Friend
Noot noot!


Imię: Łukasz
Pomógł: 89 razy
Wiek: 34
Dołączył: 01 Kwi 2006
Posty: 1739
Miasto: Warszawa

Wysłany: 2013-09-12, 02:25   

Opcja jQuery obsługuje wszystkie przeglądarki ze starymi Internet Explorerami włącznie.

Wersja CSS działa wszędzie, z kolei w IE dopiero od wersji 10 wzwyż. Całą magię wykonuje wówczas sama przeglądarka, bez konieczności posiłkowania się jakimikolwiek dodatkami - w konsekwencji wykonanie tego samego zdarzenia (np. przyciemnienia ekranu w Twoim przykładzie) w samym CSS zabiera mniej zasobów systemowych niż ta sama wersja w jQuery. Odpada w ogóle konieczność zaprzęgania do tego silnika JS, a nawet ładowania samego jQuery - jeśli używasz go tylko po to, by przyciemnić ekran, to tak naprawdę zaprzęgasz wielofunkcyjny ogromny kombajn do tego, żeby skosić sobie trawnik w ogródku. ;)

Przejścia w CSS mogą teoretycznie działać jeszcze szybciej, gdy zostaną obsłużone sprzętowo przez przeglądarkę. Tu trochę więcej na ten temat.

Nie ma póki co lepszej i gorszej opcji, bo to zależy od priorytetów. jQuery jest fajne, bo można dużo zrobić i się nie narobić, ale za cenę dodatkowych kilobajtów ściąganych przez przeglądarkę. Za jakiś czas, gdy starsze wersje Internet Explorera wyjdą z użycia (przynajmniej od wersji 10 będzie już naprawdę nieźle), jQuery w tego typu zastosowaniach stanie się zbędnym balastem.
______________________________________________________
:szok:

But we never gonna survive unless we get a little crazy...
 
  podziel się tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegóły.
Nie możesz odpowiadać w tematach. Zobacz szczegóły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2020 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony wordpress
kod zniżkowy -10% za licencję
w koszyku wpisz: Blogowicz
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz