Manevrare mai bună a imaginilor sparte - CSS-Tricks

Anonim

Imaginile lipsă fie nu vor afișa nimic, fie vor afișa o casetă de stil (?) Atunci când sursa lor nu poate fi găsită. În schimb, poate doriți să înlocuiți acest lucru cu un grafic „imagine lipsă” pe care sunteți sigur că există, astfel încât să existe un feedback vizual mai bun că ceva nu este în regulă. Sau, poate doriți să o ascundeți în întregime. Acest lucru este posibil, deoarece imaginile pe care un browser nu le poate găsi declanșează un eveniment de „eroare” JavaScript pe care îl putem urmări.

// Replace source $('img').on("error", function() ( $(this).attr('src', '/images/missing.png.webp'); )); // Or, hide them $("img").on("error", function() ( $(this).hide(); ));

În plus, poate doriți să declanșați un fel de acțiune Ajax pentru a trimite un e-mail unui administrator al site-ului atunci când se întâmplă acest lucru.