3

我正在创建一个网页，允许用户输入 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()？

processesUrlFetch : 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

4

1 回答 1

0

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

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

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

于 2012-07-17T21:25:14.083 回答