Sitede bulunan giflerin senkronize şekilde çalıştırmak, yani giflerin aynı anda harekete başlaması mümkündür. Bu konuda bunu öğreneceğiz.

Gif uzantılı hareketli resimler piyasa tabiri ile  kısaca gif diye geçer.

Giflerin Hareketini Aynı Anda Başlatalım

Sitede gif formatlı hareketli resimleriniz var ve bu resimlerin hareketlerinin aynı anda başlamasını istiyorsunuz…

Normalde kullanıcılar sitede gezerken site açılışında düşük boyutlu gif formatlı dosyaları önce görürler.

50kb. lık bir gif ile 500 kb. lık bir gifin sayfada yüklenme değerine bakacak olursak, 50kb değerinde olan gifin daha çabuk yükleneceğini ve kullanıcıya daha çabuk görüneceğini anlarız. 500.kb lık gif ise 50kb lık gife göre daha geç yüklenerek kullanıcıya daha geç gözükecektir. Tabi daha çabuk yüklenen harekete daha önce başlayandır. Hatta bu durum bazen aynı boyutlu gif dosyalarında bile yaşanabilir. Yani iki animasyondan biri geç başlar.

Özellikle büyük dosyalar daha sonra görünmeye başlar. Haliyle önce gösterime giren hareketli gif ile sonra gösterilmeye başlayan gif aynı anda harekete başlamaz.

Giflerin senkron çalışmasını istiyorsanız aşağıda vereceğim kodu kullanmanız gerekir.

Anlatacağım yöntem ile iki veya daha çok gifin aynı anda yani senkron çalışmasını sağlayabilirsiniz.

Çok aradığım ve bulamadığım bir konuydu paylaşmak istedim.

Çoğunuzun belki işinize yaramayacağı bu konu bazılarınız için altın değerinde ve arayınca internette bulunmuyor.

Bu yöntemi kendi adıma Before After senkroinize gif örneklerimde kullanıyorum.

Bu sayede 2 animasyon arasındaki farkı aynı anda gösterebiliyorum.

Hatta iki video arasındaki farkı gif veya webp gibi formatlara çevirip kod yardımı ile aynı anda başlatarak gösterebiliyorum. Örnek: Link

Hemen kodu paylaşayım:

<img class="preload" src="https://100numaraliadam.com/wp-content/uploads/2020/10/saat3.gif" />
<img class="preload" src="https://100numaraliadam.com/wp-content/uploads/2020/10/saat3.gif" />
<img class="preload" src="https://100numaraliadam.com/wp-content/uploads/2020/10/saat3.gif" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(window).on('load', function() {
$('.preload').attr('src', function(i,a){
$(this).attr('src','')
.removeClass('preload')
.attr('src',a);
});
});
</script>
<style>.preload { visibility: hidden; }</style>

Bu kod içindeki javascript kodu jquery 1.1 – 3.5 sürümlerinde çalışıyor. Yazıyı yazdığım an itibari ile jquery kütüphanesinin yayımlanmış son versiyonu 3.5 du ben de bunu kullandım. Muhtemelen daha sonra çıkacak jquery lerde de kod çalışır.

Hangi sürümlerde çalıştığı bilgisini şunun için verdim: sizin kullandığınız herhangi bir jquery sürümü varsa bu kod için ekstra jquery kod yükleterek sisteme ek yük bindirmenize gerek kalmaz. Sizde herhangi bir sürüm var ise <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> bu kısmı silerek deneyebilirsiniz.

Ayrıca resme özel olarak verdiğimiz preload class ını unutmayın bu class sayesinde resimlerin aynı anda çalışmasını sağlıyoruz.

Son olarak en sondaki css koduna (hidden) da dikkat edelim. Bu kod sayesinde preload class ına sahip resimler yüklenmeden gifleri göstermiyor. En geç resim yüklenene kadar bekleniyor ve tümü bir anda gösteriliyor.

Kod Kullanmadan Örnek Gifler:
Görüleceği üzere senkronizasyonda bozukluklar var.

Kod Kullanarak Örnek Gifler:
Görüldüğü gibi farklı kb. resimler (saatler) aynı anda başladı ve senkron çalışıyor.

Bu örnekte saatler aynı anda başlar. Yani giflerimiz senkron çalışıyor.

Bunun tek sakıncası tüm gifler yüklenene kadar kullanıcı yazılarınızı görür resim daha sonra çıkar.

Not: Konuyu tekrar modifiye ettim. Daha önce paylaştığım kod içinde javascript kısmı jquery 1.7 – 3.0 sürümleri arasında çalışıyor, diğer sürümlerde çalışmıyordu.
3.0 dan sonra load fonksiyonu değiştirilmiş!  Yeğenim Kamer sağolsun uyardı ve kodun stabil halini düzenleyip gönderdi. Ben de konuyu tekrar düzenledim.
Artık kod jquery 1.1 den şu an itibari ile en son sürüm olan 3.5 arası tüm sürümlerde stabil şekilde çalışıyor. Muhtemelen sonraki sürümlerde de çalışacak. 🙂👍