Öğeyi tamamen sayfanızdan gizlemenin en etkili yolu nedir?

enter image description here

Durum

  • Gizlemek istediğim çok fazla btns var.
  • Onları gizlemelerini sağlarım, ancak kasıtlı olarak istediğim gibi değil.
  • Sayfam yüklenirken çok hızlı yanıp sönüyorlar.
  • Onları saklamaya çalışıyorum.

Attığım adımlar

  • İlk önce, bunu yapmak için hide() jQuery işlevini kullandım. Hoşuma gitti ama sonra Sayfa yükleme sırasında tüm bu BT'lerin yanıp söndüğünü fark ettim. #Curious ???

  • İkincisi, öğrendim .css ("display", "none"); hide() 'dan daha hızlıdır, bu yüzden denedim ve hala aynı sonucu elde ediyorum, belki daha hızlı, ama Yanıp sönen hala görüyorum.

  • Üçüncüsü, bazı insanlar .attr ('disabled', doğru); 'nın daha hızlı olduğunu ve YES ' in denediğimi iddia ediyor. hiç çalışmıyor bile.

  • .attr ('disabled', doğru); modası geçmiş olabilir, o zaman en güncel olanını kullanıyorum .prop ('disabled', doğru); , ve hala hala çalışmıyor!

Şimdi tamamen cansızım. Umarım birisi buna bir son vermeme yardımcı olabilir.

Öğeyi tamamen sayfanızdan gizlemenin en etkili yolu nedir?

1
Hepinize gayret gösterdiğiniz için çok teşekkürler. Ben bir kafaya gidip bunu şimdi yapacağım.
katma yazar kyo, kaynak
Hepinize gayret gösterdiğiniz için çok teşekkürler. Ben bir kafaya gidip bunu şimdi yapacağım.
katma yazar kyo, kaynak
Hepinize gayret gösterdiğiniz için çok teşekkürler. Ben bir kafaya gidip bunu şimdi yapacağım.
katma yazar kyo, kaynak
@bassxzero: Eğer CSS kullanıyorsam hala gösterebilir miyim? Başlangıçta yanıp sönmeyi durdurmanın/önlemenin bir yolu var mı?
katma yazar kyo, kaynak
@bassxzero: Eğer CSS kullanıyorsam hala gösterebilir miyim? Başlangıçta yanıp sönmeyi durdurmanın/önlemenin bir yolu var mı?
katma yazar kyo, kaynak
@bassxzero: Eğer CSS kullanıyorsam hala gösterebilir miyim? Başlangıçta yanıp sönmeyi durdurmanın/önlemenin bir yolu var mı?
katma yazar kyo, kaynak
@druidicwyrm: Lütfen hatalıysam beni düzelt. Bunların hepsinde yeniyim. jQuery hide() 'i kullanıyorum çünkü onları bir noktada gösterebilmek istiyorum. Hangi yolun daha iyi olduğundan bile emin değilim, onları geri göstermek için tetikleyebildiğim sürece mutluyum. Tavsiye lütfen.
katma yazar kyo, kaynak
@druidicwyrm: Lütfen hatalıysam beni düzelt. Bunların hepsinde yeniyim. jQuery hide() 'i kullanıyorum çünkü onları bir noktada gösterebilmek istiyorum. Hangi yolun daha iyi olduğundan bile emin değilim, onları geri göstermek için tetikleyebildiğim sürece mutluyum. Tavsiye lütfen.
katma yazar kyo, kaynak
@druidicwyrm: Lütfen hatalıysam beni düzelt. Bunların hepsinde yeniyim. jQuery hide() 'i kullanıyorum çünkü onları bir noktada gösterebilmek istiyorum. Hangi yolun daha iyi olduğundan bile emin değilim, onları geri göstermek için tetikleyebildiğim sürece mutluyum. Tavsiye lütfen.
katma yazar kyo, kaynak
en verimli olanı bir konteyner sınıfı oluşturmaktır ve bu nedenle C ++ - saklı CSS kurallarını kullanarak bütünüyle gizli ya da görünür bir öğe koleksiyonunu döndürmek için kullanılır. bu, JS’deki döngüden ve DOM’u etkilenen her öğe için manipüle etmekten daha hızlıdır. CSS kullanımı ayrıca rahatsız edici sayfa yükünün yanıp sönmesini de önler, çünkü HTML gösterilmeden önce CSS uygulanacaktır, oysa JS jquery'yi yüklemeli, ardından tüm sayfalar zaten görünür durumdayken tüm kodu çalıştırmalıdır.
katma yazar dandavis, kaynak
en verimli olanı bir konteyner sınıfı oluşturmaktır ve bu nedenle C ++ - saklı CSS kurallarını kullanarak bütünüyle gizli ya da görünür bir öğe koleksiyonunu döndürmek için kullanılır. bu, JS’deki döngüden ve DOM’u etkilenen her öğe için manipüle etmekten daha hızlıdır. CSS kullanımı ayrıca rahatsız edici sayfa yükünün yanıp sönmesini de önler, çünkü HTML gösterilmeden önce CSS uygulanacaktır, oysa JS jquery'yi yüklemeli, ardından tüm sayfalar zaten görünür durumdayken tüm kodu çalıştırmalıdır.
katma yazar dandavis, kaynak
en verimli olanı bir konteyner sınıfı oluşturmaktır ve bu nedenle C ++ - saklı CSS kurallarını kullanarak bütünüyle gizli ya da görünür bir öğe koleksiyonunu döndürmek için kullanılır. bu, JS’deki döngüden ve DOM’u etkilenen her öğe için manipüle etmekten daha hızlıdır. CSS kullanımı ayrıca rahatsız edici sayfa yükünün yanıp sönmesini de önler, çünkü HTML gösterilmeden önce CSS uygulanacaktır, oysa JS jquery'yi yüklemeli, ardından tüm sayfalar zaten görünür durumdayken tüm kodu çalıştırmalıdır.
katma yazar dandavis, kaynak
en verimli olanı bir konteyner sınıfı oluşturmaktır ve bu nedenle C ++ - saklı CSS kurallarını kullanarak bütünüyle gizli ya da görünür bir öğe koleksiyonunu döndürmek için kullanılır. bu, JS’deki döngüden ve DOM’u etkilenen her öğe için manipüle etmekten daha hızlıdır. CSS kullanımı ayrıca rahatsız edici sayfa yükünün yanıp sönmesini de önler, çünkü HTML gösterilmeden önce CSS uygulanacaktır, oysa JS jquery'yi yüklemeli, ardından tüm sayfalar zaten görünür durumdayken tüm kodu çalıştırmalıdır.
katma yazar dandavis, kaynak
Demek istediğin, sanki yokmuş gibi demek? Sayfanın daha hızlı yüklenmesini sağlamak için?
katma yazar Ali Almoullim, kaynak
@ rangerover.js "kabaca eşittir .css (" display "," none ")" api.jquery .com/hide . Yani evet CSS ile hiçbiri gösterme ve sonra .show (); jQuery ile.
katma yazar bassxzero, kaynak
@ rangerover.js "kabaca eşittir .css (" display "," none ")" api.jquery .com/hide . Yani evet CSS ile hiçbiri gösterme ve sonra .show (); jQuery ile.
katma yazar bassxzero, kaynak
@ rangerover.js "kabaca eşittir .css (" display "," none ")" api.jquery .com/hide . Yani evet CSS ile hiçbiri gösterme ve sonra .show (); jQuery ile.
katma yazar bassxzero, kaynak
Bir örnek görebilir miyiz? Gerçekten CQ kullanmanız gerekiyordu, jQuery kullanmamanız gerekiyordu. Anlamı Sayfa yükündeki öğeleri gizlemeniz gerektiğini biliyorsanız, neden bunu yapmak için CSS kullanmıyorsunuz?
katma yazar bassxzero, kaynak
Bir örnek görebilir miyiz? Gerçekten CQ kullanmanız gerekiyordu, jQuery kullanmamanız gerekiyordu. Anlamı Sayfa yükündeki öğeleri gizlemeniz gerektiğini biliyorsanız, neden bunu yapmak için CSS kullanmıyorsunuz?
katma yazar bassxzero, kaynak
Bir örnek görebilir miyiz? Gerçekten CQ kullanmanız gerekiyordu, jQuery kullanmamanız gerekiyordu. Anlamı Sayfa yükündeki öğeleri gizlemeniz gerektiğini biliyorsanız, neden bunu yapmak için CSS kullanmıyorsunuz?
katma yazar bassxzero, kaynak
Javascript kullanmadan, hiçbiri ekranı düğmelere ekleyebilirsiniz. Js kullanmanız için bir neden var mı?
katma yazar druidicwyrm, kaynak
Javascript kullanmadan, hiçbiri ekranı düğmelere ekleyebilirsiniz. Js kullanmanız için bir neden var mı?
katma yazar druidicwyrm, kaynak
Javascript kullanmadan, hiçbiri ekranı düğmelere ekleyebilirsiniz. Js kullanmanız için bir neden var mı?
katma yazar druidicwyrm, kaynak

12 cevap

Gözlemlediğiniz gecikme, tarayıcının betiği indirmesi ve yürütmesi için geçen süredir, JavaScript’teki ekranını ayarlamak için kullandığınız yöntemdir: hiçbiri önemli değildir; Gecikme (tarayıcının betiği indirmesi, ayrıştırması ve yürütmesi gerektiğinden).

En hızlı yöntem JavaScript kullanmamak ve sayfa oluşturulurken düğmelere CSS (satır içi veya stil sayfası) aracılığıyla ekran: none 'ı ayarlamaktır.

1
katma
+1 Tahmininiz için teşekkürler, bunu kesinlikle deneyeceğim. Eğer satır içi CSS kullanırsam, istersem bir noktada onları tekrar gösterebilir miyim? Umarım bunu detaylandırmanın sakıncası yoktur.
katma yazar kyo, kaynak
@ rangerover.js - evet, öğedeki bir sınıfı değiştirin ( show-i ve CSS'inizde kuralı ekleyin: .show-i {display: block! important;}
katma yazar Adam, kaynak

Gözlemlediğiniz gecikme, tarayıcının betiği indirmesi ve yürütmesi için geçen süredir, JavaScript’teki ekranını ayarlamak için kullandığınız yöntemdir: hiçbiri önemli değildir; Gecikme (tarayıcının betiği indirmesi, ayrıştırması ve yürütmesi gerektiğinden).

En hızlı yöntem JavaScript kullanmamak ve sayfa oluşturulurken düğmelere CSS (satır içi veya stil sayfası) aracılığıyla ekran: none 'ı ayarlamaktır.

1
katma
+1 Tahmininiz için teşekkürler, bunu kesinlikle deneyeceğim. Eğer satır içi CSS kullanırsam, istersem bir noktada onları tekrar gösterebilir miyim? Umarım bunu detaylandırmanın sakıncası yoktur.
katma yazar kyo, kaynak
@ rangerover.js - evet, öğedeki bir sınıfı değiştirin ( show-i ve CSS'inizde kuralı ekleyin: .show-i {display: block! important;}
katma yazar Adam, kaynak

Gözlemlediğiniz gecikme, tarayıcının betiği indirmesi ve yürütmesi için geçen süredir, JavaScript’teki ekranını ayarlamak için kullandığınız yöntemdir: hiçbiri önemli değildir; Gecikme (tarayıcının betiği indirmesi, ayrıştırması ve yürütmesi gerektiğinden).

En hızlı yöntem JavaScript kullanmamak ve sayfa oluşturulurken düğmelere CSS (satır içi veya stil sayfası) aracılığıyla ekran: none 'ı ayarlamaktır.

1
katma
+1 Tahmininiz için teşekkürler, bunu kesinlikle deneyeceğim. Eğer satır içi CSS kullanırsam, istersem bir noktada onları tekrar gösterebilir miyim? Umarım bunu detaylandırmanın sakıncası yoktur.
katma yazar kyo, kaynak
@ rangerover.js - evet, öğedeki bir sınıfı değiştirin ( show-i ve CSS'inizde kuralı ekleyin: .show-i {display: block! important;}
katma yazar Adam, kaynak

Gözlemlediğiniz gecikme, tarayıcının betiği indirmesi ve yürütmesi için geçen süredir, JavaScript’teki ekranını ayarlamak için kullandığınız yöntemdir: hiçbiri önemli değildir; Gecikme (tarayıcının betiği indirmesi, ayrıştırması ve yürütmesi gerektiğinden).

En hızlı yöntem JavaScript kullanmamak ve sayfa oluşturulurken düğmelere CSS (satır içi veya stil sayfası) aracılığıyla ekran: none 'ı ayarlamaktır.

1
katma
+1 Tahmininiz için teşekkürler, bunu kesinlikle deneyeceğim. Eğer satır içi CSS kullanırsam, istersem bir noktada onları tekrar gösterebilir miyim? Umarım bunu detaylandırmanın sakıncası yoktur.
katma yazar kyo, kaynak
@ rangerover.js - evet, öğedeki bir sınıfı değiştirin ( show-i ve CSS'inizde kuralı ekleyin: .show-i {display: block! important;}
katma yazar Adam, kaynak

Html5'ten başlayarak, bir öğenin gösterilip gösterilmeyeceğini denetleyen yeni bir hidden özelliği vardır. Muhtemelen bunu elementlere eklemelisin. Bu şekilde, öğeler html ayrıştırıldığında aynı anda gizlenir ve gecikme olmaz.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Bununla birlikte, niteliği jQuery ile eklerseniz, html'nin ne zaman gösterildiğiyle js'nin yüklenip çalıştırıldığı arasında bir gecikme olacağından gecikme hala orada olacaktır.

Not: Bu sadece IE 11+ 'de çalışır

1
katma
Bu yeni, hiç duymadım. Bunu jQuery kullanarak yapabilir miyim? Bunu cevabın bir parçası olarak ekleyebilir misin. İnsanlar daha sonra çözümünüzü beğenebilirler.
katma yazar kyo, kaynak

Html5'ten başlayarak, bir öğenin gösterilip gösterilmeyeceğini denetleyen yeni bir hidden özelliği vardır. Muhtemelen bunu elementlere eklemelisin. Bu şekilde, öğeler html ayrıştırıldığında aynı anda gizlenir ve gecikme olmaz.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Bununla birlikte, niteliği jQuery ile eklerseniz, html'nin ne zaman gösterildiğiyle js'nin yüklenip çalıştırıldığı arasında bir gecikme olacağından gecikme hala orada olacaktır.

Not: Bu sadece IE 11+ 'de çalışır

1
katma
Bu yeni, hiç duymadım. Bunu jQuery kullanarak yapabilir miyim? Bunu cevabın bir parçası olarak ekleyebilir misin. İnsanlar daha sonra çözümünüzü beğenebilirler.
katma yazar kyo, kaynak

Html5'ten başlayarak, bir öğenin gösterilip gösterilmeyeceğini denetleyen yeni bir hidden özelliği vardır. Muhtemelen bunu elementlere eklemelisin. Bu şekilde, öğeler html ayrıştırıldığında aynı anda gizlenir ve gecikme olmaz.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Bununla birlikte, niteliği jQuery ile eklerseniz, html'nin ne zaman gösterildiğiyle js'nin yüklenip çalıştırıldığı arasında bir gecikme olacağından gecikme hala orada olacaktır.

Not: Bu sadece IE 11+ 'de çalışır

1
katma
Bu yeni, hiç duymadım. Bunu jQuery kullanarak yapabilir miyim? Bunu cevabın bir parçası olarak ekleyebilir misin. İnsanlar daha sonra çözümünüzü beğenebilirler.
katma yazar kyo, kaynak

Html5'ten başlayarak, bir öğenin gösterilip gösterilmeyeceğini denetleyen yeni bir hidden özelliği vardır. Muhtemelen bunu elementlere eklemelisin. Bu şekilde, öğeler html ayrıştırıldığında aynı anda gizlenir ve gecikme olmaz.

You can also add this the standard way with jquery, by using $(element).attr("hidden", "true");

Bununla birlikte, niteliği jQuery ile eklerseniz, html'nin ne zaman gösterildiğiyle js'nin yüklenip çalıştırıldığı arasında bir gecikme olacağından gecikme hala orada olacaktır.

Not: Bu sadece IE 11+ 'de çalışır

1
katma
Bu yeni, hiç duymadım. Bunu jQuery kullanarak yapabilir miyim? Bunu cevabın bir parçası olarak ekleyebilir misin. İnsanlar daha sonra çözümünüzü beğenebilirler.
katma yazar kyo, kaynak

İlk olarak, hide() ve .css ('display', 'none') neredeyse eşdeğerdir. Flash, sayfanın ilk yüklenmesinden sonra komut dosyasını indirmek ve yürütmek için geçen süre nedeniyle ortaya çıkıyor.

Elbette, düğmeleri gizlemenin en hızlı yolu, onları HTML işaretlemesinden tamamen kaldırmaktır. :)

Bununla birlikte, düğmeleri işaretlemeden kaldırmak istemediğinizi ve belki de bir noktada düğmeleri programlı olarak göstermek isteyeceğinizi, baştan beri CSS ile gizlemek isteyeceğinizi varsayarak:

button {
  display: none;
}

( disabled özelliği, kullanıcının bu özelliği destekleyen tarayıcılardaki düğme ile etkileşime girmemesini sağlar. Öğeyi gizler. değil .)

1
katma
Düzgün açıklama için teşekkürler ve ipucu.
katma yazar kyo, kaynak

İlk olarak, hide() ve .css ('display', 'none') neredeyse eşdeğerdir. Flash, sayfanın ilk yüklenmesinden sonra komut dosyasını indirmek ve yürütmek için geçen süre nedeniyle ortaya çıkıyor.

Elbette, düğmeleri gizlemenin en hızlı yolu, onları HTML işaretlemesinden tamamen kaldırmaktır. :)

Bununla birlikte, düğmeleri işaretlemeden kaldırmak istemediğinizi ve belki de bir noktada düğmeleri programlı olarak göstermek isteyeceğinizi, baştan beri CSS ile gizlemek isteyeceğinizi varsayarak:

button {
  display: none;
}

( disabled özelliği, kullanıcının bu özelliği destekleyen tarayıcılardaki düğme ile etkileşime girmemesini sağlar. Öğeyi gizler. değil .)

1
katma
Düzgün açıklama için teşekkürler ve ipucu.
katma yazar kyo, kaynak

İlk olarak, hide() ve .css ('display', 'none') neredeyse eşdeğerdir. Flash, sayfanın ilk yüklenmesinden sonra komut dosyasını indirmek ve yürütmek için geçen süre nedeniyle ortaya çıkıyor.

Elbette, düğmeleri gizlemenin en hızlı yolu, onları HTML işaretlemesinden tamamen kaldırmaktır. :)

Bununla birlikte, düğmeleri işaretlemeden kaldırmak istemediğinizi ve belki de bir noktada düğmeleri programlı olarak göstermek isteyeceğinizi, baştan beri CSS ile gizlemek isteyeceğinizi varsayarak:

button {
  display: none;
}

( disabled özelliği, kullanıcının bu özelliği destekleyen tarayıcılardaki düğme ile etkileşime girmemesini sağlar. Öğeyi gizler. değil .)

1
katma
Düzgün açıklama için teşekkürler ve ipucu.
katma yazar kyo, kaynak

İlk olarak, hide() ve .css ('display', 'none') neredeyse eşdeğerdir. Flash, sayfanın ilk yüklenmesinden sonra komut dosyasını indirmek ve yürütmek için geçen süre nedeniyle ortaya çıkıyor.

Elbette, düğmeleri gizlemenin en hızlı yolu, onları HTML işaretlemesinden tamamen kaldırmaktır. :)

Bununla birlikte, düğmeleri işaretlemeden kaldırmak istemediğinizi ve belki de bir noktada düğmeleri programlı olarak göstermek isteyeceğinizi, baştan beri CSS ile gizlemek isteyeceğinizi varsayarak:

button {
  display: none;
}

( disabled özelliği, kullanıcının bu özelliği destekleyen tarayıcılardaki düğme ile etkileşime girmemesini sağlar. Öğeyi gizler. değil .)

1
katma
Düzgün açıklama için teşekkürler ve ipucu.
katma yazar kyo, kaynak