jquery images auto-loading

Question

У меня есть этот код, который автоматически загружает фотографии из каталогов, которые создают «альбомы». каталоги названы: 1, 2, 3, 4, 5 и т. д., фотографии там 1.JPG, 2.JPG, 3.JPG и т. д. Я загружаю их в элементы div (tytul - это переменная для хранения id div, которые являются phot1, phot2 и т. Д.). И теперь мой вопрос, как скрыть div, когда нет, например, изображения 6.JPG?

var numbopht = 20; 
var numbosubgals = 3; 
var activegal = numbosubgals; 
var leftnumber = 1; 

var idnam = []; 
//var idname = "#phot" + 


    var idunderline = "#subgal" + numbosubgals; // subgal to id pozycji na liście 




loadContent = function(i){ 

    var tytul = "#phot" + i; 
var photurl = "../photos/" + activegal + "/" + i + ".JPG"; 
var img = $("<img />").attr({ 
src: photurl, 
width:"120", 
height:"90" 

}); 
    $(tytul).empty().html(img); 


}; 

некоторые вещи, которые не взаимодействуют с этим

 <div id="scrollbar"> 
      <div id="phot20" class="photon"></div> 
      <div id="phot19" class="photon"></div> 
      <div id="phot18" class="photon"></div> 
      <div id="phot17" class="photon"></div> 
      <div id="phot16" class="photon"></div> 
      <div id="phot15" class="photon"></div> 
      <div id="phot14" class="photon"></div> 
      <div id="phot13" class="photon"></div> 
      <div id="phot12" class="photon"></div> 
      <div id="phot11" class="photon"></div> 
      <div id="phot10" class="photon"></div> 
      <div id="phot9" class="photon"></div> 
      <div id="phot8" class="photon"></div> 
      <div id="phot7" class="photon"></div> 
      <div id="phot6" class="photon"></div> 
      <div id="phot5" class="photon"></div> 
      <div id="phot4" class="photon"></div> 
      <div id="phot3" class="photon"></div> 
      <div id="phot2" class="photon"></div> 
      <div id="phot1" class="photon"></div> 
     </div> 

другие вещи

Answer 1

Метод 1:

Используйте функцию, чтобы проверить изображение существует или нет:

function imageExists(image_url){ 
var http = new XMLHttpRequest(); 
http.open('HEAD', image_url, false); 
http.send(); 
return http.status != 404; 
} 

Используйте функцию для выполнения дальнейших действий:

$.get(image_url) 
.done(function() {  // Image exists at specified URL and set properties 
var img = $("<img />").attr({ 
src: photurl, 
width:"120", 
height:"90" 
}); 

}).fail(function() { // Image does not exist so Hide the Div 
    $("#tytul").hide(); 
}) 

Method2: Используйте onerror событие img.

myImage.onerror = function(){ 
document.getElementById("tytul").style.display = 'none'; 
} 

Answer 2

Edit, обновленный

Попробуйте

v3

$("#scrollbar div[id*=phot]:not(:has(img))").hide() 

jsfiddle http://jsfiddle.net/guest271314/8x9bvhnj/