jquery 图片自动加载

Question

我有这个代码自动从创建“相册”的目录中加载照片。目录命名为：1、2、3、4、5等，里面的照片有1.JPG、2.JPG、3.JPG等。我将它们加载到 div 元素中（tytul 是一个变量，用于存储 div 的 id，它们是 phot1、phot2 等）。现在我的问题是如何在没有图像 6.JPG 的情况下隐藏 div？

    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

方法一：

使用函数检查图像是否存在：

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();
})

方法二：使用img的onerror事件。

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

Answer 2

编辑、更新

试试

v3

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

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