Kategoriler
Kodlama

Kırık görselleri bulmak (jQuery)

jQuery ile bir sayfadaki kırık kullanılmayan görselleri kaldırmak veya yerine başka görseli göstermek.

Benim gibi eski blog sahibiyseniz muhtemelen sitenizdeki yıllar önceki sayfalarında birçok kırık görsel vardır. Çoğunlukla dışarıdan başka bir siteden eklenmiş olan bu kırık görselleri jQuery ile kontrol edip düzeltmemiz mümkün.

Kod:

(function($){jQuery(document).ready(function(){
 $(".entry-content img").bind("error",function(){
  $(this).attr("src","https://wolkanca.com/favicon-200x200.png");
});
});})(jQuery);

Bu kod sadece .entry-content classı içerisindeki görselleri kontrol etmek için isterseniz aşağıdaki kod ile sitenin tamamını kontrol edebilirsiniz:

(function($){jQuery(document).ready(function(){
 $("img").bind("error",function(){
  $(this).attr("src","https://wolkanca.com/favicon-200x200.png");
});
});})(jQuery);

“https://wolkanca.com/favicon-200×200.png” burada sayfadaki kırık görsellerin yerini alacaktır.

Yukarıdaki kodu sayfayı yeniden yükleyip(return) deneyebilirsiniz.

Eğer kırık görsellerin yerine bir görsel koymak istemiyor ve komple görünmemesini isterseniz aşağıdaki kodu kullanabilirsiniz:

(function($){jQuery(document).ready(function(){
 $("img").bind("error",function(){
  $(this).attr("style","display:none;");
});
});})(jQuery);

Kodun yaptığı şey özetle; tarayıcının sayfadaki görsellerden hata bulunanları bildirmesi vesilesiyle bu hata bildirimine göre işlem yapmak. Normal açılan bir image dosyası hata vermeden gösterilecektir, hata veren gösterilmeyenler ise kodun direktifine göre işlem görecektir.

Ayrıca hoşunuza gidebilir:

Bulunmayan bozuk/broken resimlere CSS dokunuşu: Bu makalede web sitesinde bulunmayan 404 veren görsellerin daha yakışıklı görünmesi için basit bir CSS kodu paylaştım.
WordPress wp-content hack: wp-content klasöründe var olmayan görseller için 404 sayfası yerine varsayılan bir resim göstermek.

Kolay gelsin 🤘🏻