Zincirleme Arkaplan Çağırma

Resimlere arkaplan atadığınız zaman biri yüklenmiyorsa ikinci bir arkaplan atayarak bir fail safe oluşturmanız mümkün. Bunun için kullanıbilecek il yöntem CSS ile:

<section id="page" class="cover-all" style="background-image: url(/Resim/Upload/resmim.png), url(/Resim/Upload/homebg.jpg);">

Bu durumda resmim.png dosyası bulunamadığı ya da yüklenemediği taktirde ikinci resim devreye girecektir.

İkinci yöntem ise jQuery içeren daha karışı bir yöntem. Çalışma mantığı bir adet gizli resim ve hata yakalamaya bağlıdır. Önce gizli resmi sayfanın içine ekliyor ve yüklenememe ihtimali olan resmin yolunu içine yazıyoruz:

<img id="kategoriResim" class="hidden" src="/Resim/Upload/resmim.png" />

Daha sonra jquery ile kontrol ve atamları geçekleştiriyoruz:

$(document).ready(function () { //döküman yüklendi
    $("#kategoriResim").on('error', function () { //eğer gizli resim hata veriyorsa
        $('#page').css("background-image", "url(/Resim/Upload/homebg.jpg)"); //resim arkaplanını değiştir
        $('#kategoriResim').attr("src", "/Resim/Upload/homebg.jpg"); //gizli resme de aynı yolu ata
    });
});

Makale Tarihi: 12.10.2016 Gücellenme Tarihi: 22.02.2018

Yorum Yaz

Yorumlarınız denetimden geçtikten sonra yayınlanmaktadır...