Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
Css gösterme ve gizleme için ne yapılmalı?
#1
Biz her zaman müşterilerimizin görüntülerini yönetmek nasıl geliştirmek için yollar arıyoruz, biz misyonumuz ve kültürümüzün bir parçası olduğunu bir parçası yaptık.
Müşterilerimizden biriyle çalışarak, mobil cihazlardaki görüntü trafiğinin benzer web sitelerine kıyasla üç kat daha fazla olduğunu fark ettik. Araştırmaya başladığımızda, medya sorgularını kullanarak özellik ekranını hiçbiri olarak ayarlayarak çok fazla görüntü gizlediklerini fark ettik.
Görüntüleri gizleme hedefi gerçekleştirilirken, gizli görüntüler için tarayıcı istekleri hala gönderiliyor ve bu da site yükleme performansı üzerinde doğrudan olumsuz bir etkiye sahipti.
Ekran ayarı: resimlere veya resim kaplarına hiçbiri, tarayıcıların görüntüyü istemesini engellemez.
Görüntüler için “display:none” Nasıl Çalışır
Beklediğiniz gibi, görüntüler özellik görüntüsünü none olarak ayarladığınızda başka bir öğe gibi davranır, görüntü gösterilmez ve DOM üzerinde herhangi bir yer kaplamaz.
Sorun şu ki, tarayıcılar, DOM'un bir elemanını dinamik olarak değiştiren bir komut dosyası olasılığı nedeniyle, DOM'DA bulunan her öğeyi yükleyecektir ve eğer görüntüler gizliyse ancak DOM'DA ise, o zaman bu görüntü için ağ isteğini göndereceklerdir.
Bu, bir görüntü durumunda, çoğu durumda senaryolarda, onu kullanmayacağınız zaman, yine de talep edileceği anlamına gelir.
Bir örneğe bir göz atalım:


Görüntüleri içeren HTML'nin display:none yerine DOM'A yüklenmesini önleyebilir ve gerekirse daha sonra ekleyebilirsiniz. Açısal veya tepki gibi bir çerçeve kullanıyorsanız, bunu başarmak süper kolaydır. Örneğin, HTML'yi bir ıf deyimi ile oluşturmaktan kaçınırsınız. Vanilya JavaScript kullanıyorsanız bu da süper basittir.
Resimlerinizi veya en azından gizlemek istediğiniz resimleri arka plan resimleri olarak kullanın. Öğe gizliyse arka plan resimleri yüklenmez.
Sonuç
Görüntüler, görüntüleme özelliği yok olarak ayarlanmış olsa bile tarayıcılar tarafından talep edilir.
Bunu önlemek için, daha önce bahsettiğim çözümü uygulayabilirsiniz, ancak görüntünün görünürlüğünü çok fazla değiştirecekseniz, görüntüyü HTML'DEN eklemek ve kaldırmak, display:none özelliğini kullanarak önleyebileceğiniz gereksiz bir performans maliyeti olabilir.
Çözüm 2'yi kullanmak, DOM'U manipüle etmek zorunda kalmadan CSS'yi kullanabildiğiniz için daha iyidir.
Umarım bu makale, bunları gizlemek ve bunları istemekten kaçınmak istediğinizde resimlerinizi nasıl yöneteceğinizi anlamanıza yardımcı olur.


CSS menüsünün bir telefon ekranının genişliğine küçültmek için çok büyük olduğu bir mobil site (medya sorguları kullanarak) geliştiriyorum. Bariz yolu kolayca mümkün dokunun olmak ekranın her li sekmesi %100 genişliğini yapmaktır. Bu da tüm ekranı menüyü yapar, içeriği sayfaya doğru iter. iyi değil.

Bazılarının kodda iki menüye sahip olmayı tercih ettiğini görüyorum. Biri masaüstünden gizli ve biri mobil cihazdan gizli. Seçilebilir bir liste olarak gösterilen mobil, bu sadece doğru gelmiyor. Ve Seçme listesini sevmiyorum.

İşte sorun, olurdu…

Bir menü kodu kullanın ve mobil medya sorgusunda, JavaScript ile ortaya çıkarmak/değiştirmek için CSS kullanarak yük üzerinde gizlenmiş mi? (Yapmak için basit)

Bir menü kodu kullanın ve mobil sayfa yük gizli olması için JavaScript kullanın sonra JavaScript ile/geçiş ortaya? (soruyu dileyin mobil cihazlarda seçici olarak işlemek için JavaScript'i kullanabilir misiniz?)

En iyi yaklaşım hangisi olduğu konusunda herhangi bir tavsiye veya yorum takdir edilecektir? Sadece CSS kullanarak ana navigasyonu gizlemek için endişeleniyor (sadece mobil cihazlar için verildi). Ve tüm cep telefonları JavaScript kullanıyor mu?
Bul
Alıntı


Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi