Ağır bir sayfadaki tüm öğeler (resimler gibi) tarayıcıda birlikte yüklenecek

Ağır bir asp.net sayfam var. İşlenirken, bazı görüntüler başlangıçta gelir, ardından geri kalanını yükler. Davranıştan kurtulmak istiyoruz. Sayfa sadece tüm içerik hazır olduğunda görüntülenmeli ve birlikte gösterilmelidir. Bunu nasıl başarabiliriz? Sayfanın tamamen hazır olana kadar beklemesini istemek için bir yol var mı?

2

4 cevap

Bu yapılabilir, ancak buna karşı tavsiye ederim. JavaScript'i kullanarak (bkz. @TJHeuvel yanıtı), "ışıkları açmadan" önce DOM'ın hazır olmasını bekleyebilirsiniz (genellikle gizli bir kabı görünür olana dönüştürür) ancak iyi bir kullanıcı deneyimi olup olmadığını kendinize sorun:

  1. Geçerli yol: Sayfa yüklenirken, kullanıcınız teorik olarak bilgi almaya ve sayfanın nasıl yerleştirildiğini anlamaya başlayabilir.

  2. Önerilen yol: Eğer sayfa, söylediğin kadar ağırsa, kullanıcı URL'ye gider ve ne ... bir "yükleme" animasyonlu GIF'i 5 saniye boyunca (veya daha fazla) görür? Sadece kendim için konuşabilirim, ancak tamamen oluşturulmasa bile, SOME içeriğini hiç görmüyorum.

5
katma
Sevgili, çünkü gerçek!
katma yazar TJHeuvel, kaynak

Sayfayı dolduran bir öğe olabilir ve JavaScript olayıYükleme yangınları onu gizlediğinde.

<div id='loading' style='z-index:100; width:100%; height:100%; background:#FF0000'>Loading, please wait!</div>

<script type='text/javascript'>

window.onload = function()
{
    document.getElementById('loading').style.display = 'none';
}

</script>
4
katma
Olumlu cevap çünkü Lijo'nun sorusunu doğrudan doğruya cevaplaması. Ama yine de genelde kötü bir uygulama olduğunu düşünüyorum.
katma yazar Greg Pettit, kaynak

Css'de Resim Sprite kavramına bakın. Bu yöntemi kullanarak bu problemi çözebilirsiniz. Sayfadaki tüm görüntüleri birleştirerek sadece bir resim yapın. Ardından görüntü hareketli grafiğini kullanın. Birçok web sitesi bunu kullanır, böylece sayfadaki içerikler tek seferde yüklenir.

Refer this http://www.w3schools.com/css/css_image_sprites.asp

2
katma
Ayrıca yararlı. Tüm görüntüler için tek bir hareketli grafik ile etkili olmak zor, ancak kesinlikle ilgili görüntüler (örneğin, tüm nav öğeleri, düğmeler ve widget'lar) HTTP isteklerinin sayısını azaltmak ve daha büyük parçalar halinde görüntüleri doldurmak için bir sprite içine konabilir zamanında.
katma yazar Greg Pettit, kaynak

Görüntü sorununa gelince, As Rohal, Image Sprite'in css'de en iyisi olduğunu, ancak bunu kullanamıyorsanız, daha sonra yeniden boyutlandırılan daha küçük boyutlu bir görüntü kullanmayı deneyin lütfen Hanselman blog imageresizer programı hakkında gerçekten güzel olanı anlatıyor .... umarım bu yardımcı olur

1
katma