SORU
23 Mayıs 2009, CUMARTESİ


Görüntüleri önceden yükle JavaScript/jQuery kullanarak kesin en iyi yolu?

Bu soru soruldu tamamen farkındayım ve her yerde, bu YÜZDEN ve hem de cevap verdi. Ancak, her seferinde farklı bir cevap var, *8 örneğin*, this that.

Bir WordPress kullanmak ya da değil kullanarak olsun, umurumda değil - önemli olan ne işe yarıyor ve çapraz tarayıcı olmasıdır.]

Önyükleme görüntüleri için en iyi yolu nedir?

CEVAP
23 Mayıs 2009, CUMARTESİ


Ne yazık ki, bu senin amacına göre değişir. Eğer stil amaçlar için görüntüleri kullanmayı planlıyorsanız, en iyi bahis Sprite kullanmaktır. http://www.alistapart.com/articles/sprites2

Eğer <ımg görüntüleri kullanmak&; gt etiketleri planlıyorsanız ancak, daha sonra ön yükleme ile

function preload(sources)
{
  var images = [];
  for (i = 0, length = sources.length; i < length;   i) {
    images[i] = new Image();
    images[i].src = sources[i];
  }
}

(değiştirilmiş kaynak What is the best way to preload multiple images in JavaScript? alınan)

new Image() kullanarak DOM yöntemlerini kullanarak gider içermeyen ancak görüntü olarak belirtilen yeni bir istek sırasına eklenecektir. Bu görüntü, bu noktada, aslında sayfaya eklenmez gibi, yeniden işleme ilgisi yok. Ancak, sayfa (komut tüm olması gerektiği gibi, mümkün olduğunda) sonuna kadar bu daha kritik unsurları tutan önlemek için eklemeyi öneriyoruz.

Edit: yorum Image ayrı nesneleri düzgün çalışması için gerekli olduğunu belirterek çok doğru bir şekilde yansıtacak şekilde Düzenlenmiş. Daha yakından kontrol için teşekkürler, benim hatam.

Edit2: tekrar kullanılabilirlik daha açık bir hale getirmek için düzenlenmiş

Edit 3 (3 yıl sonra):

Yeni bir yaklaşım ön yükleme için tarayıcıları görünür olmayan resimler (: yok ya bu cevap olarak, hiç bir belgeye eklenen ekran) nasıl değişiklikler nedeniyle tercih edilir.

Bir Ajax isteği görüntüleri erken alma zorlamak için kullanabilirsiniz. JQuery kullanarak, örneğin:

jQuery.get(source);

Ya da bir önceki örnekte bağlamında, yapabilirsin:

function preload(sources)
{
  jQuery.each(sources, function(i,source) { jQuery.get(source); });
}

Bu iyi olduğu gibi olan Sprite bu durumda geçerli değildir unutmayın. Bu sadece fotoğraf galerileri gibi şeyler için veya görüntüleri görünür başlangıçta olmadığı için yüklenmiyor görüntüleri/atlı karıncalar sürgü.

Ayrıca bu yöntem IE için (ajax normalde görüntü verileri almak için kullanılır) çalışmıyor unutmayın.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • CZTUTORIALS

    CZTUTORIALS

    28 Ocak 2011
  • pjtoohot

    pjtoohot

    15 NİSAN 2008
  • Schmittastic Jr.

    Schmittastic

    19 Mart 2013