Kırık görsel linklerini değiştirmek

Dinamik olmayan versiyonunu şurada paylaştığım, jQuery ile yapılmış fonksiyonun dinamik olanını da buraya kaydediyorum.

Dinamik olmasını isteme nedenimiz CDN kullanılan sitelerde bazen CDN domainin değiştirilmesi gerekliliği oldu, ya farklı bir CDN domainini kullanmak ya da o sayfadaki görsellerde CDN’i devre dışı bırakmak için kullanılabilir bir fonksiyon oldu.

Kod örneği şöyle:

$(".featured-media img").each(function (){
  let i = $(this).attr("src");
  if (
    i.indexOf("wp.com") > -1 &&
    ((void 0 !== this.naturalWidth && 0 == this.naturalWidth) ||
      "uninitialized" == this.readyState)
  ){
    let t = i.replace("i5.wp.com", "i2.wp.com");
    $(this).attr("src", t)
 }
});

Yukarıdaki kodda yapılan sayfadaki görsellerde wp.com adresli görseller var ise ve hata veriyorsa i5.wp.com olan adresleri i2.wp.com olarak değiştirmek.

Çalışan canlı versiyonunu CodePen’de inceleyip düzenleyebilirsiniz, tavsiyem bunu setTimeout ile kullanmak çünkü bazı görseller geç yükleniyor veya sunucu geç cevap veriyor olabilir:

Eğer ilgili görsel için dinamik bir görsel eklenmeyecekse yani manuel tüm kırık görsellere tek bir görsel eklemek veya o görseli gizlemek için ise aşağıdaki yeterli, bind(“error”,function() dinamik olmuyor şu an için, aslında olabilir ama ekstra fazladan fonksiyon yazmak işime gelmedi.

$("img").bind("error",function(){
  $(this).attr("src","varsayilanresimadresi");
});

Ek olarak CSS ile bozuk görsellere müdahale etme imkanı da var: wolkanca.com/bulunmayan-bozuk-broken-resimlere-css-dokunusu/

Kolay gelsin.