jQuery ile Kırık Resimleri Onarın

Web sayfanızdaki kırık linkleri jQuery desteğiyle bulabilir, bir başka görselle değiştirebilirsiniz. Böylece ziyaretçilerinizin çalışmayan resimlerle karşılamamış olursunuz. İnternette, web sayfanızdaki kırık görselleri size bildiren yüzlerce araç mevcut. Ancak bu işlemi birkaç satır kod yazarak daha hızlı ve kolay bir şekilde yönetebilirsiniz.

İşte karşınızda Adobewordpress tarafından geliştirilen bir diğer jQuery plugini : jQuery Image Fixer

ÖRNEĞİ GÖRÜNTÜLE

jQuery Image Fixer

Bu pluginimiz kırık linklerinizi yönetmenizi sağlar. Özetleyecek olursak

1. Kırık linklerinizi çalışan bir görselle değiştirir.
2. İlgili ekranın görsel raporunu konsola bildiri olarak düşürür.

jQuery ile kırık resimler nasıl bulunur?

Resimlerin çalışıp çalışmadığını kontrol etmek için birçok yöntem kullanabiliriz. Ancak söz konusu JavaScript kodları ve jQuery kütüphanesi olunca 2 ayrı metodun arkasına sığınacağız.

1. complete : görsel yüklenmesinin tamamlandığını gösterir.
2. naturalWidth : görselin özgün genişliğini alır. Eğer 0 veya undefined ise resim kırık olabilir.

Hal böyleyken bu 2 yapıyı içeren bir for each döngüsü bize yetecektir.

Başlamadan önce

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

Fonksiyonumuzun ismi brokenImages() olsun.

Yukarıda da bahsettiğimiz gibi complete ve naturalWidth tanımlarını içeren bir for ile başlıyoruz.

function brokenImages() {
/* Ekrandaki toplam resim sayısını bulalım */
  var totalimg = $("body").find("img").length;
  var brokenimg = 0;
  $('img').each(function() {
    /* Yukarıda sözünü ettiğimiz complete ve naturalWidth odaklı if döngüsü */
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      brokenimg ++;
      /* Aşağıdaki alana kırık resimlerin yerine koyulacak görselin URL'ini giriniz. */
      this.src = 'BURAYA';
    }
  });
  console.log('Toplamda '+ totalimg +' resim var ve bunların '+ brokenimg +' tanesi çalışmıyordu. Hepsi onarıldı!');
}

Bu kadar!

İşlemi uygulamak istediğiniz sayfalarda fonksiyonu çağırmanız yeterli olacaktır.

$(document).ready(function(){
  brokenImages();
});

İyi çalışmalar.