JavaScript İle Kırık Resim Linklerini Düzeltme

27 Aralık 2018 tarihinde Emre Can ÖZTAŞ tarafından paylaşıldı.

Bir web sayfasında, ilk istenmeyen şey; kırık linklerdir. Sayfa bağlantıları veya resimlerin linklerinin sağlam olması kullanıcı deneyimi açısından önemlidir.

Bu yazıda çok pratik bir şekilde, kırık linke sahip olan daha doğrusu var olmayan resimleri düzeltme işlemini göstermek istiyorum.

Eğer sayfanızda birden fazla resim varsa; bu resim dosyalarının linklerinin kırılma olayına karşı çok basit bir önlem alabilirsiniz.

<img> etiketi ile resim eklerken, onerror seçeneğini de ekleyin.

<img src="tavsan-resmi.jpeg" alt="Angora tavşanı" onerror="imageBrokenLinkError(this)">

onerror seçeneğinde belirttiğimiz fonksiyonumuz da aşağıdaki gibi olacaktır.

function imageBrokenLinkError(image) { 
    image.onerror = '';
    image.src = 'standart-tavsan-resmi.jpeg';
}

Yukarıdaki kodlarımızda; resim dosyasının linkinde herhangi bir hata olması durumunda, elimizde olan diğer bir resmin linkini verdik. Burada soru şu: hata olması durumunda verdiğimiz resim dosyasının linki de kırılırsa veya kırıksa?

Linki kırılan resim dosyasına başka bir resim eklemek yerine bu resim dosyasını gizleye de bilirsiniz.

function imageBrokenLinkError(image) { 
    image.hidden = true;
}

Bu işlemleri jQuery ile de gerçekleştirebilirsiniz.

// Standart resim ekleme
$('img').on("error", function() {
    $(this).attr('src', 'standart-tavsan-resmi.jpeg');
});

// veya

// Resim dosyasını gizleme
$("img").on("error", function() {
    $(this).hide();
});

JavaScript dosyanızda bir yerde bu veya buna benzer bir kod saklarsınız (standart bir de resim), ilerleyen zamanlar da kırık resim dosyaları konusunda sıkıntı yaşamazsınız.

Kategoriler: [JavaScript] Etiketler: #jquery #kırık link

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.