Question

我正在使用一个画廊，当它悬停在缩略图上时会在工具提示中提取完整的图像。问题是，这些完整的图像通常在取景器之外。为了解决这个问题，如果图像超出窗口边界，我会移动工具提示，这需要立即知道图像尺寸（以避免工具提示跳转）。但是，图像需要加载（.gifs），所以我不能等待DOM才能获得尺寸。所以，我正在调用一个PHP脚本来在加载之前返回图像尺寸。

我遇到的问题是我的$ .get调用没有响应。我知道PHP脚本工作正常，但我没有通过jquery从中获取任何数据。任何帮助将不胜感激。谢谢！

hover.js：

this.imagePreview = function(){

    $("a.preview").hover(function(e){
            var viewHeight = $(window).height() + $(window).scrollTop();
            var viewWidth = $(window).width();
            var xOffset=e.pageX+40;
            var yOffset=e.pageY+40;
            var url = 'http://mysite.com/i/' + this.href.slice(20);
            var w = 0;
            var h = 0;

            $("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");

            $.get("getDimensions.php/?img=" + url, function(data){
                w = data.w;
                h = data.h;
                $("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
            });

            $("#preview")
                .css("top",yOffset + "px")
                .css("left",xOffset + "px")
                .fadeIn("fast");

            $('#img').load(function() {
                if((e.pageX+img.width)>viewWidth) {  xOffset=e.pageX-img.width-70; }
                if((e.pageY+img.height)>viewHeight) { yOffset=e.pageY-img.height-70; }
                $("#preview")
                    .css("top",yOffset + "px")
                    .css("left",xOffset + "px")
                    .fadeIn("fast");
            });

        },
        function(){
            $("#preview").remove();
        });

};

// starting the script on page load
$(document).ready(function(){
    imagePreview();
});

getDimensions.php：

<?php
list($width, $height, $type, $attr) = getimagesize($img);
echo json_encode(array("w"=>$width,"h"=>$height));
?>

Answer 1

$("body").append("<div id='preview'><img src=" + url +" id='img'/></div>");

当你附加有src prop的img时，不再会触发加载事件。这就是问题所在。

Answer 2

你试过..

var rand = Math.floor(Math.random()*11);

$.get("getDimensions.php/?img=" + url + "&r=" + rand, function(data){
            w = data.w;
            h = data.h;
            $("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
        },"json");

（另外，我强烈推荐.ajax over .get）

你能从getDimensions.php（在firebug中）查看你得到的内容吗？

Answer 3

我的猜测是，jQuery无法知道从getDimensions.php返回的数据是JSON（而不是普通的旧文本），并且它不会尝试解析它。

data的价值是什么（如果将其打印到控制台）？

如果这是问题，您可以在echo之前将此行添加到PHP脚本中来解决此问题：

header('Content-Type: application/json');

Answer 4

尝试$ .parseJSON（）：

        $.get("getDimensions.php/?img=" + url, function(data){
            var jdata = $.parseJSON(data);
            w = jdata.w;
            h = jdata.h;
            $("body").append("INFO ABOUT IMAGE DIMENSIONS TRIGGERED: " + w + h);
        });

并确保你的php工作（不应该是$ _GET ['img']而不是$ img？）。

<强>更新

如yoda所述，你不需要解析php打印的对象，因为它是一个javascript对象。尽管如此，要使javascript识别出来，你必须在php脚本的第一行输入命令：

header('Content-type: application/json');

否则php输出被读作字符串，你必须像我之前所说的那样解析它。

使用AJAX + JQuery通过PHP文件获取数据

4 个答案: