jquery - 如何使用 jQuery 在 URL 获取上确定像 pinterest 一样的图像大小

Question

我正在创建一个网页，让用户输入 URL 并从 URL 中提取图像，就像 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 插件是否对我的事业有帮助。

我有两个问题

1. 如果我正在做什么来动态获取“真实”图像大小这里插入的图像是一种有效的跨浏览器技术(依赖于img.load 事件)
2. 如何确保 showNextMessage() 仅循环结束后触发？

processsUrlFetch:函数(响应){ 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() 的调用移动到附加的回调中到最后完成的图像加载。