Question

目标：使用动态提取并存储为JSON的图像创建墙。

问题：墙工作得非常漂亮，但即使我注射的element没有有效的img src，一些节点也会显示出来。

问题：如何防止这种情况发生？当且仅当图像src url无效时，我需要找到一种方法来排除从element注入到我当前的node中。在我的控制台中，当我这样做时，我收到 404 http错误：

var a = new Element("img[src=" + profilePic + "]");

但我不知道怎么能抓住那404并因此阻止注射。这是我的Wall代码：

var wall = new Wall("myWall", {
                            "draggable":true,
                            "autoposition":true,
                            "inertia":true,
                            "width":275,
                            "height":275,
                            "slideshow":true,
                            "transition":Fx.Transitions.Expo.easeInOut,
                            "showDuration": 3000,
                            callOnUpdate: function(items){
                                items.each(function(e, i){
                                    while (counter < maxLength) {
                                        var tw = tweets[counter];
                                        if (tw && tw.author && tw.author.picture_url) {
                                            var profilePic = tw.author.picture_url;
                                            if (tw.author.data_source === "twitter-user") {
                                                profilePic = (tw.author.picture_url).replace("_normal", "");
                                            }
                                            else if (tw.author.data_source === "facebook-user") {
                                                profilePic = tw.author.picture_url + '?type=large';
                                            }


                                            // var http = new XMLHttpRequest();
                                            // http.open('HEAD', profilePic, false);
                                            // // http.setRequestHeader("Access-Control-Allow-Origin", "*");
                                            // http.send();
                                            // if (http.status === 404) {
                                            //     console.log("BAD IMAGE!!!");
                                            // }
                                            // ims[i].src = 'https://unsplash.it/150';

                                            var a = new Element("img[src=" + profilePic + "]");
                                            if (a === null) {
                                                console.log("a is null");
                                            }
                                            a.height = 250;
                                            a.width = 250;
                                            e.node.setStyle("background", "no-repeat center center");
                                            a.inject(e.node).fade("hide").fade("in");
                                            a.addEvent("click", function (e) {
                                                if (!wall.getMovement()) {
                                                    showModal(tw);
                                                }
                                            });
                                            break;
                                        } else {
                                            counter++;

                                        }/*else {
                                             a = new Element("img[src=https://unsplash.it/150?image="+counter+"]");
                                             //a.node.setStyle("background",colors[ Math.floor(Math.random()*colors.length) ]);
                                             a.inject(e.node).fade("hide").fade("in");
                                         }*/
                                    }
                                    counter++;
                                    if( counter > maxLength ) counter = 0;
                                }.bind(this));
                            }.bind(this)
                        });

Answer 1

FIXED：

我刚刚根据我的css类添加了以下内容：

$(".prof").error(function(){
    $(this).attr('src', '../assets/images/tile/person-placeholder.jpg');
});

Wall（Mootools插件）在没有图像

1 个答案: