Question

我已经让这段代码自动加载来自创建“专辑”的目录中的照片。目录命名为：1,2,3,4,5等，照片中有1.JPG，2.JPG，3.JPG等。我将它们加载到div元素中（tytul是存储div的id的变量，它是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();
})

方法2：使用onerror的{{1}}事件。

img

Answer 2

修改，更新

尝试

V3

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

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

jquery图像自动加载

2 个答案: