"Görüntüleri önceden yükleme - görüntüleri HTML, JavaScript'te önceden yükleme örneği" gönderisine yapılan tüm yorumlar. Görüntüleri css ile önceden yükleme

Oyun için 12 görsellik bölgeyi önceden yüklemeniz gerekiyor ve bu görseller duruma göre değişebilir. Yani, şimdi 12 görüntü (SVG) yüklemem gerekiyor ve yarın 12 görüntüye daha ihtiyacım olacak. Bu nedenle, bunları yerleştirme seçeneği

uygun değil, çünkü bu durumda tüm görüntüleri sürekli olarak yüklemeniz gerekecek ve sadece 12 tanesine ihtiyacım olacak.Bu nedenle, oyuna başlamadan önce JavaScript kullanarak bunları yüklemeye karar verildi. Bunu yapmak için, şimdilik tek bir "ön yükleme" yöntemine sahip olan ve formdaki bir dizi nesneyi (src: "link", id: "id") alan ve yükleyen küçük bir "AssetsPreloader" sınıfı uyguladım. sadece Image() (yerel) sınıfının bir örneğini oluşturarak gerekli görüntüleri elde edin.

Class AssetsPreloader (statik önyükleme (arr) (arr.map ((a) => (let img = new Image (); img.src = a.src; img.id = a.id); (this.assets = this. varlıklar ||) .push (img);));))

Yüklenen tüm görüntüler, bu sınıfın statik varlıklar özelliğinde sona erer.

Kodun bir sonraki aşaması, bu görüntülerin halihazırda kullanımda olduğu oyunun ilk karesinin oluşturulmasıdır. Ve genel olarak sorun, oluşturmanın gerçekleşmemesidir. Kod yürütme ona ulaştı, kontrol ettim ve ondan sonra kod yürütüldü, ancak görüntülerin kendisi oluşturulmadı. Anladığım kadarıyla bu, görüntülerin yüklenmek için zamanlarının olmaması nedeniyle oluyor (diskten yüklenmiş olsalar bile). Ancak, ilk kareyi doğrudan tarayıcı konsolundan çizmeyi talep ederseniz, her şey olması gerektiği gibi çalışır ve çerçeve normal şekilde çizilir.

Kodun tamamı genel olarak şuna benzer:

Class AssetsPreloader (statik önyükleme (arr) (arr.map ((a) => (let img = new Image (); img.src = a.src; img.id = a.id); (this.assets = this. varlıklar ||) .push (img); this.done = true;));)) AssetsPreloader.preload ([(src: "images / image.svg", id: "id_of_image"), ...]); // ... GAME.field.draw ();

Sonuç olarak, soru görüntülerin (ve aslında genel olarak çeşitli dosya türlerinin) mümkün olduğunca doğru bir şekilde nasıl yükleneceğine gelir, böylece bunlar yüklenene kadar kod daha fazla yürütülmez. Ayrıca, şu anda ekranda bir miktar ilerleme çubuğu olması mümkündür (yani, komut dosyası da tamamen donmamalıdır). İlk aklıma gelen, kodun geri kalanını preload() yöntemine yapılan geri çağırmaya eklemekti, ancak bu fikir başarılı olmadı.

yardım istiyorum. Sadece nasıl olduğuyla değil, aynı zamanda en doğru şekilde de ilgilenir (en iyi uygulama, hepsi bu).

not Komut dosyası, defer özniteliği ile sayfaya bağlanır. Örneğin, zaman uyumsuz kullanırken, oluşturma ya gerçekleşir ya da olmaz (neye bağlı olduğunu söyleyemem). Ve sayfa yüklemesini, DOM hazırlığını veya bunun gibi bir şeyi kontrol etmek için işleyicileri kodun kendisine asmak istemiyorum.

Yazardan: Görüntü yükleme ya tamamen gözden kaçmış ya da gereksiz yere büyük eklentilere dış kaynaklı gibi görünüyor. Güzel, sorunsuz ve hızlı bir web sitesi yüklemesi, iyi bir kullanıcı deneyiminin önemli bir parçasıdır ve tasarımcınız için temel nezakettir. Kim bir sayfaya her girdiklerinde görüntülerin yavaş satır satır yüklenmesiyle tasarımlarının berbat olduğunu görmek ister?

Çalıştığım sitelerin çoğu fotoğrafçılıkla aşırı yüklenmiş durumda ve yüksek hızlı internetin faydaları, sürekli artan sayıda cihaz için ultra yüksek çözünürlüklü retina içeriği sunma ihtiyacıyla dengeleniyor. Bu, dizginleri ele almak ve resim yüklemelerini kontrol etmeye başlamak için mükemmel bir zaman ve bu makalede, size sitenizin harika görünmesini sağlayacak ve verimliliğini artıracak dört kolay yöntem göstereceğim.

Ne zaman yavaş yüklenen bir resim görsem, bir çizgi romandan bir adamla bu klasik sahneyi hatırlıyorum.

1. Her resmi ayrı ayrı yükleme (Tek Varlık)

Bu, temel JPG'lerin geleneksel satır satır yüklenmesini önlemek (veya en azından gizlemek) için sitenizdeki resimlerin herhangi birine veya tümüne uygulayabileceğiniz bir tekniktir. Her görüntüyü img_wrapper sınıfıyla bir div'e sararak başlayacağız:

< div class = "img_wrapper" > < img src = "comicbookguy.jpg" alt = "" / > < / div >

Bu sarmalayıcı, basit bir img etiketinin garanti edemediği, resimlerimizin boyutu ve en boy oranı üzerinde bize bazı ek kontroller sağlayacaktır. Ayrıca, arka plan görüntüsü veya ayrı bir öğe olarak, görüntünün yüklenmesi tamamlandıktan sonra gizlenebilen bir yükleme döndürücünün uygulanmasını da mümkün kılacaktır.

Bu örnekte, resmimizi 4:3 en boy oranıyla sınırlayacağız - duyarlı siteler için çok önemli. Görüntüyü opacity: 0; ile sakladığımızı da unutmayın; bu, onu istediğimiz zaman nasıl ve ne zaman göreceğimizi kontrol etmemizi sağlar.

Img_wrapper (konum: göreli; dolgu üst: %75; taşma: gizli;) .img_wrapper img (konum: mutlak; üst: 0; genişlik: %100; opaklık: 0;)

Img_wrapper ( pozisyon: göreceli; dolgu - üst: %75; taşma: gizli; img_wrapper img ( konum: mutlak; üst: 0; genişlik: %100; opaklık: 0;

DOM'daki her görüntü, tüm verileri sunucudan yüklendiğinde ve görüntünün kendisi tarayıcı tarafından görüntülendiğinde bir load olayı başlatır. Bu olayı yakalamak ve bağlamak için JavaScript kullanmamız gerekecek. Resim etiketine onload niteliğini ekleyerek başlayacağım.

< div > < img src = "comicbookguy.jpg" alt = "" onload = "imgLoaded(this)" / > < / div >

Daha önce hiç böyle bir şey görmemiş yeni başlayanlar için buna satır içi komut dosyası özelliği denir ve JavaScript işlevselliğini doğrudan satır içi stil niteliğini kullanarak öğeleri şekillendirmeye benzer şekilde, DOM öğelerinden başlatılan olaylara doğrudan bağlamamıza olanak tanır. İster inanın ister inanmayın, bu satır içi komut dosyası nitelikleri, web'in ilk günlerinde JavaScript yazmanın önemli bir parçasıydı ve satır içi stiller gibi, bugün saflık ve anlambilim savaşçıları tarafından kaşlarını çattı.

Bu nedenle, satır içi JavaScript'in görüntüsünden iğrenen ve koşmaya başlamak üzere olanlarınız için, lütfen bir dakikanızı ayırın ve bunun için sözümü alın, bu hala bir DOM'deki görüntü. Tamamen ilerleme ve HTML5'ten yana olsam da, zarif ve işlevsel oldukları sürece eski tarz tekniklerin kullanılmasına kesinlikle karşı değilim.

Buna bir alternatif, hazır belgedeki her görüntüye ayrı ayrı bir yükleme olayı bağlamaktır. Ancak sorun, görüntüler belge hazır çalıştırılmadan önce yüklendiğinde ve biz her görüntünün load olayına işlevselliği bağlayamadan önce ortaya çıkar. Ayrı bir sorun, görüntülerin tarayıcı tarafından önceki oturumdan önbelleğe alınması ve anında yüklenmesidir. Olayı kaçırıyoruz ve fonksiyonumuz çağrılmıyor. Onload özniteliği, olaya "önceden bağlı" olduğundan ve tabiri caizse bu soruna sahip değildir ve bu nedenle tarayıcı HTML'yi ayrıştırdığında işlenir.

Zarif ve işlevsel oldukları sürece eski usul hileleri kullanmaya kesinlikle karşı değilim..

Onload özniteliği eklendiğinde, görüntü yüklendiğinde imgLoaded () işlevi çağrılır. Gövdeyi ayrıştırmadan ve görüntüleri yüklemeden önce derlenmesi için sayfanın kendi başına bir javascript dosyasına (işlevinizde kullanıyorsanız jQuery'den sonra ve diğer eklentilerden sonra) yerleştirilmesi gerekir. Sayfanın altına bir işlev eklerseniz, işlev tanımlanmadan önce görüntülerin yüklenmeye başlama olasılığı yüksektir.

this anahtar sözcüğünü kullanarak, bir ham görüntü DOM nesnesini JavaScript işlevimize argüman olarak iletebiliriz:

function imgLoaded (img) (var $ img = $ (img); $ img.parent (). addClass ("yüklü"););

function imgLoaded (img) ( var $img = $(img); $ resim. ebeveyn (). addClass ("yüklü");

Veya düz JavaScript ile:

function imgLoaded (img) (var imgWrapper = img.parentNode; imgWrapper.className + = imgWrapper.className? "loaded": "loaded";);

function imgLoaded (img) ( var imgWrapper = img. ebeveynNode; imgWrapper. sınıfAdı + = imgWrapper. sınıf adı? "yüklü": "yüklü";

Javascript kullanarak, DOM'u bir seviye hızla yükseltebilir ve yüklenen sınıfı içeren sarmalayıcı öğeye ekleyebilirsiniz. Bunun şaşırtıcı derecede zarif bir çözüm olduğuna katılacağınıza eminim. Bu sınıfı seçerek stilini belirledikten sonra, artık opaklığını 1'e ayarlayarak yüklenen resminizi gösterebilirsiniz:

Img_wrapper.loaded img (opaklık: 1;)

Img_wrapper. yüklenen resim ( opaklık: 1;

İşlerin sorunsuz yürümesini sağlamak için, img'e bazı CSS3 geçişleri ekleyeceğiz ve resmimizi yüklerken bir "solma" efekti elde edeceğiz.

Img_wrapper img (konum: mutlak; üst: 0; genişlik: %100; opaklık: 0; -webkit-geçişi: opaklık 150ms; -moz-geçişi: opaklık 150ms; -ms-geçişi: opaklık 150ms; geçiş: opaklık 150ms;)

img_wrapper img ( konum: mutlak; üst: 0; genişlik: %100; opaklık: 0; Webkit - geçiş: opaklık 150ms; Moz - geçiş: opaklık 150ms; Ms - geçiş: opaklık 150ms; geçiş: opaklık 150ms;

Yükleme döndürücü ekranlı alternatif bir sürüm de dahil olmak üzere codepen.io'da çalışan bir örneğe bakın.

Aşamalı JPG'ler

Bu tekniğe ek bir not olarak ve bu makale hakkında aldığım bazı geri bildirimlere yanıt olarak, "ilerici" JPG'lerden kesinlikle bahsetmeye değer. Bu, satır satır yüklemeyi önlemek için JPG'leri "düzenli" yerine "ilerici" tutmayı içeren 1990'lardan kalma uzun süredir devam eden bir başka tekniktir - bunun yerine, yüklenirken aynı yükseklikte kare kare oluşturma. Bu tekniğin ana avantajı, resimler yüklendiğinde gelen içeriğin sayfanın etrafından dolaşmasını engellemesidir.

Döndürücülerin yüklenmesi ve sönmesi gibi etkilerin can sıkıcı olup olmadığı kişisel zevk meselesidir, ancak temelde sarma div hilesi bu sorunları minimum CSS ve JavaScript ile çözer..

Sarma div tekniğiyle ilgili en iyi şey, resimleriniz yüklenirken yüksekliği hakkında endişelenmenize gerek olmamasıdır ve kullanıcılarınızı çirkin piksel gruplandırmalarına mahkum etmek zorunda kalmamanızdır. kullanıcı için çok kötü. normal bir indirme kadar can sıkıcı. Ayrıca, hiçbir maliyeti yoktur - bir çizimi birden çok kez yeniden görüntüleme süreci, aslında düşük güçlü mobil cihazlara ek yük getirir. Döndürücülerin yüklenmesi ve solma gibi etkilerin can sıkıcı olup olmadığı kişisel bir zevk meselesidir, ancak temelde sarma div hilesi bu sorunları minimum CSS ve JavaScript ile çözer ve kullanıcıya güvenmeye gerek yoktur (CMS durumunda) JPG'leri belirli bir şekilde kaydederken.

2. Birden çok görüntüyü toplu olarak yükleyin

Yukarıdaki teknik, tekil görüntüler için çok iyidir, ancak ya bir atlıkarınca veya slayt gösterisinde görüntülenecek bir dizi görüntümüz varsa veya Masonry gibi bir işaretleme eklentisi kullanıyorsak? Döngü/kaydırıcı eklentilerini kullanırken yaygın bir hata, genellikle tüm görüntüleri yüklenmeden önce, belge hazır olduğunda bunları işlemektir. Bu, özellikle büyük dosya boyutlarına sahip yüksek çözünürlüklü fotoğraflarla uğraşıyorsak, slayt gösterisinin boş, henüz yüklenmemiş bir görüntüye geçmesine neden olabilir.

Bu fenomeni önlemek için, tercih ettiğiniz eklentiyi yalnızca gerekli tüm resimler zaten yüklendiğinde işlemeniz gerekir. Yukarıdaki tekniğin bir varyasyonunu kullanarak, slayt gösterimizdeki tüm resimlere tekrar onload niteliğini ekleyeceğiz:

Not: Aşağıdaki işaretleme, yalnızca basitleştirilmiş örnek slayt gösterisi eklenti işaretlemesi olarak sağlanmıştır ve ihtiyaçlarınıza uyacak şekilde uyarlanmalıdır.

< div id = "Slideshow" > < img src = "slide_1.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_2.jpg" alt = "" onload = "slideLoaded(this)" / > < img src = "slide_3.jpg" alt = "" onload = "slideLoaded(this)" / > < / div >

JavaScript'te, resim yükleme sürecini izlemek ve hazır olduğunda eklentimizi işlemek için slideLoaded () işlevini kullanacağız:

function slideLoaded (img) (var $ img = $ (img), $ slideWrapper = $ img.parent (), toplam = $ slideWrapper.find ("img").uzunluk, yüzdeLoaded = null; $ img.addClass ("yüklü" "); var yüklendi = $ slideWrapper.find (". yüklendi "). uzunluk; if (yüklü == toplam) (percentLoaded = 100; // EKLENTİYİ BAŞLATIN $ slideWrapper.easyFader ();) else (// İZLEYİN İŞLEM yüzdesiYüklendi = yüklendi / toplam * 100;););

işlev slaytYüklendi (img) ( var $img = $(img), $ slideWrapper = $ img. ebeveyn (), toplam = $ slideWrapper. bulun ("img"). uzunluk, yüzdeYüklü = boş; $ resim. addClass ("yüklü"); var yüklendi = $ slideWrapper. bulun (".loaded"). uzunluk; if (yüklü == toplam) ( yüzdeYüklenmiş = 100; // EKLENTİYİ BAŞLAT $ SlideWrapper. easyFader(); ) Başka ( // SÜRECİ İZLE yüzdeYüklenmiş = yüklenmiş / toplam * 100;

Bir materyali her yüklediğimizde, ilerlemesini takip etmek için ona yüklü bir sınıf ekleriz.
Son if ile, yüklenen sınıfa sahip görüntü sayısı kapsayıcıdaki toplam görüntü sayısına eşit olduğunda eklentiyi başlatırız (bu durumda jQuery EasyFader). Ek bir özellik olarak, yüklenen değişkeni bir toplam değişkene bölebilir ve bunu bir yüzde görüntüleyerek veya ilerleme çubuğunun genişliğini kontrol etmek için kullanarak veya benzer bir şeyle kullanıcılar için ilerlemeyi görselleştirmek için kullanabilirsiniz.

Yine, bu komut dosyası, jQuery'den ve hazır olduğunuzda hangi eklentiyi işlerseniz işledikten sonra, belgenizin başına yerleştirilmelidir.

3. Performans için görüntüleri önbelleğe alma

Çok sayıda resim içeren sitelerde, kullanıcı sayfayı tararken tarayıcı önbelleğine arka plan yükleyerek resim yüklemelerindeki yükü biraz azaltmak mümkündür.

Örneğin, her ikincil sayfanın üst kısmında yüksek çözünürlüklü bir görüntünün bulunduğu çok sayfalı bir sitem olduğunu varsayalım. Kullanıcıya, ayrı bir sayfaya gittiklerinde tüm bu resimlerin yüklenmesini beklemek yerine, kullanıcı sayfaya girmeden önce bunları önbelleğe yüklemek mümkündür. URL'lerini bir diziye koyarak başlayalım:

Tipik olarak, bu verileri altbilgide bir komut dosyası etiketi biçiminde sayfanın kendisine beslemek için CMS'mi veya siteyi hangi arka uçta oluşturuyorsam kullanırdım. Böylece görüntü listesi dinamik olarak güncellenebilir ve genişletilebilir.

Bir kullanıcı sitemin ana sayfasını ziyaret ettiğinde, üçüncü taraf bir yükleme ekleyerek sayfanın içeriğinin yüklenmesini kesintiye uğratmadığımdan emin olmak için herhangi bir şey yapmadan önce tamamen yüklenmesini bekleyeceğim. Bunu yapmak için, DOM açılır açılmaz tetiklenen belgeye hazır olayın aksine, yalnızca tüm sayfa içeriği yüklendiğinde ve oluşturulduğunda (görüntüler dahil) tetiklenen pencere yükleme olayına JavaScript işlevselliği ekleyeceğim. hazır:

function preCacheHeros () ($ .each (heroArray, function () (var img = new Image (); img.src = bu;));); $ (pencere) .load (işlev () (preCacheHeros ();));

işlev preCacheHeros () ( $. her biri (heroArray, işlev () ( var img = new Image(); resim. kaynak = bu; } ) ; $ (pencere). yük (işlev () ( preCacheHeros (); } ) ;

Veya düz JavaScript ile:

function preCacheHeros () ((i = 0; i için)< heroArray.length; i++){ var url = heroArray[i], img = new Image(); img.src = url; }; }; window.onload = preCacheHeros();

işlev preCacheHeros () ( için (i = 0; ben< heroArray . length ; i ++ ) { var url = heroArray [i], img = yeni Resim (); resim. kaynak = url; pencere. onload = preCacheHeros ();

Her yinelemede boş bir resim nesnesi oluşturarak ve ardından resmimizin src özniteliği için URL'yi ayarlayarak heroArray'de dolaşıyoruz. Böylece, görüntü mevcut oturum için tarayıcı önbelleğine yüklenir, böylece kullanıcı görüntünün sunulduğu sayfayı gerçekten ziyaret ettiğinde anında görüntülenir.

Ne yazık ki, önbelleğe alma uygulaması indirmeleri hızlandırırken ve istemci tarafında kullanıcı deneyimini iyileştirirken, aslında sunucudaki yükü artırır. Böyle bir durumda, ön önbelleğe alma işlemini gerçekleştirmeden önce site analizlerinizi dikkate almak mantıklıdır. Kullanıcılarınızın çoğunluğu sitenizin ana sayfasını ziyaret eder ve ikincil sayfaları ziyaret etmeden önce ayrılırsa, sunucunuza yapılan ek isteklerin maliyeti, bu birkaç kullanıcı için kalan faydalardan daha ağır basabilir.

Önbelleğe almayı uygulamadan önce site analizlerinizi değerlendirmek mantıklıdır.

Önbelleğe alma

Ancak, gerçekten ön önbelleğe almayı kullanmak istiyorsanız, görüntüleri siteye stratejik olarak yerleştirilmiş anlamlı gruplara ayırmanızı öneririm. Örneğin, sitede kalan kullanıcıların büyük çoğunluğunun ana sayfayı ziyaret ettikten sonra ikincil sayfaya gideceğini bilerek, ana sayfadayken birincil ikincil sayfa resimlerini önceden önbelleğe alırdım.

Bununla birlikte, blog gönderilerimin her birinin aynı zamanda yüksek çözünürlüklü bir resmi olduğunu varsayalım. Bunları ziyaretçi ana sayfadayken önbelleğe almak yalnızca sunucu tarafına kötü bir şekilde zarar vermekle kalmaz, aynı zamanda örneğin ana sayfayı ziyaret eden kullanıcıların yalnızca %15'i bir blog gönderisine gittiği için kaynak israfı da olabilir. Hemen hemen tüm kullanıcıların oradan bir blog gönderisine gideceğini biliyorsanız, blog resimlerinizi önbelleğe almak için en iyi yer bir açılış sayfası olabilir.

Bu, tahmine dayalı önbelleğe alma olarak bilinir; burada, kullanıcılarımızın sitedeki hareketlerinin davranış kalıplarını tahmin etmek için analizlerimizden elde ettiğimiz istatistikleri kullanırız. Biraz fantastik gelebilir, ancak ziyaretçilerin akışını ne kadar doğru tahmin edebileceğinize ve bunu kendi (ve kullanıcılarınız) avantajına dönüştürebildiğinize şaşıracaksınız.

Biraz fantastik gelebilir, ancak ziyaretçilerin akışını ne kadar doğru tahmin edebileceğinize şaşıracaksınız.

4. Sunucudaki yükü azaltmak için görüntünün "tembel" yüklenmesi

Geç yükleme, tarayıcının belge yüklenir yüklenmez sayfadaki tüm görüntüleri istemesini ve görüntülemesini önlemek için özel bir olaydan sonra programlı olarak yüklenen görüntüleri ifade eder.

Esas olarak uzun veya resim ağırlıklı sayfalarda kullanılır. Barrel blog açılış sayfasında, geçerli filtrede veya sayfada olmayan resimlerin öğe görünene kadar gereksiz yere yüklenmemesini sağlamak için geç yüklemeyi MixItUp eklentisiyle birleştiriyoruz. Tembel olarak yüklenecek herhangi bir resim tekrar img_wrapper sınıfıyla bir div'e sarılacak, bu da jQuery ile kolayca seçebilmemiz için sırayla lazy_load sınıfı verilecek:

). yük (işlev () (

tembelYük ();

Yukarıdaki işlev, pencere yükleme olayı tetiklendikten sonra tüm görüntüleri "tembelce" yükler, ancak.each () döngüsü içindeki kod, çeşitli durumlara uyacak şekilde uyarlanabilir. Bunun için çok yaygın bir kullanım, pencere kaydırma olayına eklemek ve görüntüleri görünüm alanına kaydırırken "tembelce" yüklemektir.

Görüntüleri yüklemek için ilet

Son 12 ay boyunca birçok projede bu tekniklerden birkaçını deneme sürecinde, yakın zamanda yeniden tasarlanan varilny.com projesinde (Nisan ayında piyasaya sürüldü) kullanmak için onları gerçekten kesip cilalamam gerekti. Son derece fotoğraf ve görüntü ağırlıklı bir web sitesinden performansın her zerresini sıkıştırmaya çalışırken görüntülerin zarif bir şekilde yüklenmesini sağlamak için dördünün bir kombinasyonunu kullandım. Önbelleğe alma ve tembel yüklemeyi AJAX, slayt gösterileri ve istemci tarafı sayfalandırma kullanarak sayfa yükleme ile birleştirerek, tüm site için harika ve sorunsuz bir deneyim oluşturabildik.

Bu teknikleri Barrel geliştirme ekibi tarafından bir sunum için sıkıştırmaya çalışırken, tüm bu tekniklerin kağıt üzerinde ne kadar hafif olduğuna - genellikle jQuery'de 5-10 satır kod - ve bunların herhangi birine ne kadar kolay entegre edilebildiğine hoş bir şekilde şaşırdım. proje. Ek olarak, bunların her biri karmaşıklık ve ekstra kod olmadan düz JavaScript ile yazılabilir, ancak sık sık yaptığımız gibi jQuery kullanıyorsanız, sağlam DOM geçiş tekniklerinden kesinlikle yararlanmalısınız.

Bu teknikler, şüphesiz kendi işlevselliklerini gerçekleştirmenin tek yoludur, ancak mevcut çerçevelere ve eklentilere kolayca uyarlanabilirler. Henüz resim yüklemeyi düşünmediyseniz, umarım şimdi düşünürsünüz! Neden bir veya iki tanesini bir sonraki projenizde uygulamıyorsunuz?

Neden görüntüleri önceden yüklememiz gerekiyor? Çoğu zaman, yüksek kaliteli arayüz oluşturma, site kontrolleri için kullanırız.

Örnek:

Hareket etme (için / konumundan) özelliğine sahip bir galeri komut dosyası veya metin blokları vardır. Grafik oklar hareket kontrolünden sorumludur. Bir okun üzerine geldiğinizde, resmi başka biriyle değiştirilir.
Tarayıcı fareyle üzerine gelindiğinde ne yapar? Sunucuya bir resim için bir istek gönderir. Çok hızlı bir yanıtla bile, "yanıp sönen" bir etki fark edilecektir. Görüntüleri önceden yüklerseniz, bu olmaz.

Başvuru

Bu yaklaşım, modern düzende nadiren kullanılır. CSS Sprite kullanmak daha çok tercih edilir. Ancak, böyle bir olasılık yoksa ve buna gerçekten ihtiyacınız varsa - kedinin altına hoş geldiniz.

Var imgPath = "/ tpl / resimler /"; // resimlerin bulunduğu dizine giden yol // resimlerin listesi var preloadImagesList = Array ("about_hover.jpg", "news_hover.jpg", "photo_hover.jpg", "video_hover.jpg", "contacts_hover.jpg"); / // *********************************** // function preloadImages (görüntüler) ((var i = 0; ben< images.length; i++){ var image = images[i]; $("") .attr (" src ", imgPath + resim);) // için) // preloadImages / ************************** * *** / // işlev çağrısı $ () hazır (işlev () (preloadImages (preloadImagesList);))

Oyun için 12 görsellik bölgeyi önceden yüklemeniz gerekiyor ve bu görseller duruma göre değişebilir. Yani, şimdi 12 görüntü (SVG) yüklemem gerekiyor ve yarın 12 görüntüye daha ihtiyacım olacak. Bu nedenle, bunları yerleştirme seçeneği

uygun değil, çünkü bu durumda tüm görüntüleri sürekli olarak yüklemeniz gerekecek ve sadece 12 tanesine ihtiyacım olacak.Bu nedenle, oyuna başlamadan önce JavaScript kullanarak bunları yüklemeye karar verildi. Bunu yapmak için, şimdilik tek bir "ön yükleme" yöntemine sahip olan ve formdaki bir dizi nesneyi (src: "link", id: "id") alan ve yükleyen küçük bir "AssetsPreloader" sınıfı uyguladım. sadece Image() (yerel) sınıfının bir örneğini oluşturarak gerekli görüntüleri elde edin.

Class AssetsPreloader (statik önyükleme (arr) (arr.map ((a) => (let img = new Image (); img.src = a.src; img.id = a.id); (this.assets = this. varlıklar ||) .push (img);));))

Yüklenen tüm görüntüler, bu sınıfın statik varlıklar özelliğinde sona erer.

Kodun bir sonraki aşaması, bu görüntülerin halihazırda kullanımda olduğu oyunun ilk karesinin oluşturulmasıdır. Ve genel olarak sorun, oluşturmanın gerçekleşmemesidir. Kod yürütme ona ulaştı, kontrol ettim ve ondan sonra kod yürütüldü, ancak görüntülerin kendisi oluşturulmadı. Anladığım kadarıyla bu, görüntülerin yüklenmek için zamanlarının olmaması nedeniyle oluyor (diskten yüklenmiş olsalar bile). Ancak, ilk kareyi doğrudan tarayıcı konsolundan çizmeyi talep ederseniz, her şey olması gerektiği gibi çalışır ve çerçeve normal şekilde çizilir.

Kodun tamamı genel olarak şuna benzer:

Class AssetsPreloader (statik önyükleme (arr) (arr.map ((a) => (let img = new Image (); img.src = a.src; img.id = a.id); (this.assets = this. varlıklar ||) .push (img); this.done = true;));)) AssetsPreloader.preload ([(src: "images / image.svg", id: "id_of_image"), ...]); // ... GAME.field.draw ();

Sonuç olarak, soru görüntülerin (ve aslında genel olarak çeşitli dosya türlerinin) mümkün olduğunca doğru bir şekilde nasıl yükleneceğine gelir, böylece bunlar yüklenene kadar kod daha fazla yürütülmez. Ayrıca, şu anda ekranda bir miktar ilerleme çubuğu olması mümkündür (yani, komut dosyası da tamamen donmamalıdır). İlk aklıma gelen, kodun geri kalanını preload() yöntemine yapılan geri çağırmaya eklemekti, ancak bu fikir başarılı olmadı.

yardım istiyorum. Sadece nasıl olduğuyla değil, aynı zamanda en doğru şekilde de ilgilenir (en iyi uygulama, hepsi bu).

not Komut dosyası, defer özniteliği ile sayfaya bağlanır. Örneğin, zaman uyumsuz kullanırken, oluşturma ya gerçekleşir ya da olmaz (neye bağlı olduğunu söyleyemem). Ve sayfa yüklemesini, DOM hazırlığını veya bunun gibi bir şeyi kontrol etmek için işleyicileri kodun kendisine asmak istemiyorum.

Mizanpaj yaparken ve resimlerle her türlü hileyi oluştururken (genellikle fareyle üzerine gelindiğinde ve hatta animasyonlarında ikame ile), böyle bir nüans her zaman ortaya çıkar. resmin / resmin yavaş yüklenmesi... İlk bakışta sorun o kadar da ciddi değil ve resimler yüklenir yüklenmez her şey yolunda gidiyor ancak aynı anda bir resim yükleyip onu değiştirmeye çalışan bu ilk fareyle üzerine gelme efekti öyle bir sarsıntı efekti yaratıyor ki, bu genellikle çok hoş görünmez ve web sitenizin kullanıcılarının ilk izlenimini mahvedebilir.

İLE BİRLİKTE animasyon işler daha da kötü. Örneğin, 2 saniye sonra bir otobüsle değiştirilen geçen bir arabayı JS'ye (JQuery) uygulamanız gerektiğini düşünün. Araba ve otobüs ile görüntüler farklıdır. Aynı zamanda, yalnızca tarayıcının kendilerine yükleme yeteneği olan bir bağlantı aldığı anda yüklenmeye başlayacaklar ( yani, animasyonun başında). Böyle bir resmin yüklenmesi birkaç saniye sürecektir. Yani, iki saniyelik animasyonun yarısının yalnızca bu resmi yükleyeceği ortaya çıktı - bu bir sipariş değil.

Ancak tüm bunlar önceden yüklenerek düzeltilebilir ( ön yükleme) ana sayfayı yükledikten hemen sonra resmi ara belleğe yüklemenizi sağlayan resimler ( hatta ondan önce). Bu yazıda bahsetmek istediğim şey bu.

JavaScript'te görüntüleri önceden yükleme (JQuery)

JS yükleme seçeneği, özellikle animasyonla uğraşıyorsanız, bana en iyilerinden biri gibi görünüyor. Özü, JavaScript kullanarak resmin bir kopyasını oluşturmanız ve tarayıcı arabelleğine yüklemenizdir, böylece gerekirse, zaten yükleneceği için resmi artık yüklemeniz gerekmez. önceden yüklenmiş.

Kulağa karmaşık mı geliyor? =) Ve tıpkı bu koda benziyor, burada resmin yolunu kendi yolunuzla değiştirmeniz gerekiyor ve her şey işe yarayacak:

// görüntüleri jQuery buffer.preloadImages = function()'a yükleyecek bir jQuery işlevi oluşturun ((var i = 0; i için)< arguments.length; i++) { jQuery("") .attr (" src ", argümanlar [i]);)); // yüklenmesi gereken görüntünün yolunu belirtin $ .preloadImages (" / tpl / testimg.png ");

Birkaç resim yüklemeniz gerekiyorsa, bunları virgülle ayırarak aşağıdaki gibi listeleyebilirsiniz:

$ .preloadImages ("imageone.jpg", "dirname / imageok.jpg", "/tpl/testimg.png");

Herhangi bir sayıda resim olabilir. Ana şey, jQuery işlevini unutmamaktır, ön yükleme olmadan çalışmayacaktır.

Bu yöntemin dezavantajları da vardır, örneğin, kullanıcının tarayıcısında JS'nin etkinleştirilip etkinleştirilmemesine bağlıdır. Ancak kişisel deneyimime göre, JS'yi kapatmış olanlara bakarsanız, modern site oluşturma teknolojilerinde çok fazla uygulama yapamayacağınızı söyleyeceğim. Ve bence bu kadar çok kullanıcı yok. Genel olarak, çoğunluğa eşit olmanız gerekir ve çoğunluk, tarayıcıyı bu ölçüde özelleştirmez.

Ben şahsen bu yükleme yöntemini uygulaması kolay olduğu için birçok projede kullanmayı tercih ediyorum.

Yeni HTML5 özellikleriyle görüntüleri önceden yükleme

Bu yöntem, HTML5 teknolojisinin kendisinin çok uzun zaman önce piyasaya sürülmemiş olması nedeniyle nispeten yakın zamanda ortaya çıktı. Özü, bağlantı etiketi aracılığıyla resme bir bağlantı eklemeniz ve rel ( yüklü elemanın türü) bunun bir ön yükleme olduğunu yazıyorsunuz. Böylece tarayıcı bu etiketi görür ve otomatik olarak panoya bir resim yükler.

Bu, html koduna böyle bir etiket eklenerek yapılır ( sadece resmin bağlantısını kendi başınıza değiştirin):

Burada rel 2 parametre içerir: ön işleme- Majesteleri Chrome için ve önceden getirme- diğer tarayıcılar için. Daha fazla resim yüklemek istiyorsanız, etiketi kopyalayın ve bağlantıyı gerektiği kadar değiştirin:

Bu yöntemin avantajı, JS'yi devre dışı bırakmanın ön yüklemeyi hiçbir şekilde etkilememesidir, ancak kişisel olarak 2 bariz dezavantaj görüyorum:
1) HTML5 teknolojisi ve dolayısıyla bu önyükleme yöntemi tüm tarayıcılar tarafından desteklenmez. Ancak şimdi, tarayıcılar güncellendi ve en modern gelişen tarayıcılar HTML5'i tanıyor, ancak yine de bu ideal olmaktan uzak.
2) JS uygulamasının aksine daha hantal, çünkü her görüntünün ayrı bir etiketle tanımlanması gerekecek ( ve tarayıcılar arası uyumluluğa yakın bir şey elde etmek için farklı rel parametreleriyle).

Genel olarak bu yöntemin umut verici olduğunu düşünüyorum ancak zaman alıyor. şimdi içinde çok yönlülükten yoksun.

Zamana göre test edilmiş HTML'de resimlerin önceden yüklenmesi

Saf html'de genellikle akla gelen ilk fikir, bir CSS parametresiyle bir div bloğu oluşturmaktır. "görüntü yok;", içinde bir resim var ve bu bir ön yükleme olmalı. Aslında bu işe yaramaz, tarayıcı yalnızca görüntü hiçbiri olmadığında arabelleğe yüklenmeye başlar.

Ama CSS numaralarını kullanarak bir yol buldum. Sana daha fazlasını anlatacağım.

CSS opaklığı ve konumu aracılığıyla görünmez blok yerleştirme

CSS'nin böyle bir özelliği var - opaklık... Amacı şeffaflığı değiştirmektir ve şeffaflığı sıfıra kadar değiştirebilirsiniz. Ek olarak, CSS'de bir öğeyi sayfada konumlandırmak için gerekli olan bir konum özelliği de vardır ( bloğu, sayfanın görünürlüğünün içinde ve ötesinde herhangi bir yerde bilgi içeren piksel piksel kaydırabilirsiniz). Bütün bunlar bizim için yararlı olacaktır:

Böylece, aslında kullanıcı tarafından görülebilen bilgilerin dışında bulunan, resimli görünmez bir blok elde ederiz. Bu arada, ekranın dışında bu tür bir konumlandırma genellikle bir tür görünmez blok oluşturmak istiyorlarsa kullanılır; Sık sık ücretsiz şablonlara bağlantıların bu şekilde nasıl dikildiğini gördüm. yani her şeyi biliyorsun =)

Bu şekilde birkaç görüntüyü önceden yüklemek istiyorsanız, bunları div bloğunun içinde şu şekilde belirtmeniz yeterlidir:

Bunlar, web sitesi geliştirmede kullanılabilecek resimlerin/görüntülerin ön yükleme yöntemleridir. Başka fikirleriniz varsa, yorumlarda okumaktan memnuniyet duyarım.
Düzen ve animasyon oluşturmada herkese iyi şanslar! =)