Question

我正在创建一个网页，让用户输入网址并从网址中提取图片，比如Facebook或pinterest和thefancy.com。您输入了一个URL，他们会获取宽度大于指定宽度的图像。

我的代码都是jQuery，没有图像大小确定和工作正常的要求。我还应该说我的javascript知识非常有限。

当用户点击进入时，页面向服务器端脚本发出ajax请求（使用jQuery）并接收包含从页面提取的图像源数组的json对象。在ajax.success回调中，我将这个图像数组传递给一个方法，该方法使用jquery append（）方法将图像动态添加到DIV。

  // server script errors are also reported inside 
                    // ajax success callback
                    success: function(response){
                        switch(response.code) {
                            case 401 :
                                webgloo.sc.ImageSelector.showMessage(response.message,{"css":"color-red"});
                                break ;
                            case 200 :
                                webgloo.sc.ImageSelector.processUrlFetch(response);
                                break ;
                            default:
                                webgloo.sc.ImageSelector.showMessage(response.message,{"css":"color-red"});
                                break ;
                        }
                    },

我很难尝试在成功回调处理程序中获取图像大小。在SO上阅读之后，我添加了一个图像加载处理程序，在该图像加载处理程序中，我有一个回调addImage（），它增加了num_added变量。后来我想使用这个num_added 变量，用于确定向用户显示的消息类型。

问题是showNextMessage（）不等待在processUrlFetch（）中完成循环。一旦调用processUrlFetch（），就会触发showNextMessage（）。因此，我总是显示“找不到图像”消息。

我试过研究这个话题，但我不在这里。我认为混合jquery和DOM事件可能是一个问题。另外，我不确定通过image.load（）获取图像大小的方法是多么的防弹。我也不知道imagesloaded插件是否有助于我的事业。

我有两个问题

如果我正在做什么来动态获得“真实”的图像大小这里插入的图像是一种有效的跨浏览器技术（依赖于 img.load event）
如何确保showNextMessage（）仅用于确保showNextMessage（）循环结束后被解雇了？

processsUrlFetch：function（response）{ var images = response.images;

            for(i = 0 ; i < images.length ; i++) {
                var img = new Image();
                /* trouble part */
                img.onload = function() {
                    if((this.width >= 300) && (this.height >= 300 )) {
                        webgloo.sc.ImageSelector.addImage(this.src);
                    }

                }

                img.src = images[i] ;
                webgloo.imagep.src = images[i] ;
            }

            webgloo.sc.ImageSelector.showNextMessage();
        },



        showNextMessage : function() {

            if(webgloo.sc.ImageSelector.num_added > 0 ) {
                $("#stack").fadeIn("slow");
                $("#next-message").fadeIn("slow");
            } else {
                var message = "No image of appropriate size found!"; 
                webgloo.sc.ImageSelector.showMessage(message, {"css":"color-red comment-text"});
            }

        },

        addImage : function(image) {
            webgloo.sc.ImageSelector.num_added++ ;
            var index = webgloo.sc.ImageSelector.num_added ;

            if(webgloo.sc.ImageSelector.debug) {
                console.log("Adding image : " + index + " : " + image);
            }

            var buffer = this.imageDiv.supplant({"srcImage":image, "id":index } );
            // logo, small icons etc. are first images in a page
            // what we are interested in will only come later.
            $("div#stack .images").prepend(buffer);

            this.bucket[index] = { "id":index, "srcImage": image, "selected" : false} ;

        },

如果你想查看完整的代码 - 这是要点： - https://gist.github.com/3084904

Answer 1

就获得图像尺寸的可靠方法而言，如果你使它们成为DOM元素（例如在img标签中），你应该能够使用jQuery获得包含图像的元素的真实高度和宽度。实际的插件。对不起，如果我误解了你的问题。

来源：https://github.com/dreamerslab/jquery.actual/ 在这里演示：http://dreamerslab.com/demos/get-hidden-element-width-with-jquery-actual-plugin

至于showNextMessage只被调用一次且在适当的时候，我没有给你一个可靠的答案，但也许你可以将对webgloo.sc.ImageSelector.showNextMessage（）的调用移动到附加的回调到最后完成的图像加载。

如何使用jQuery确定URL提取时的图像大小

1 个答案: