在工具提示中显示图像

Question

我正在使用tipsy plugin

---

---

如果有人将鼠标悬停在他的链接上，我想显示 用户 的图像。现在该链接有一个 id，图像通过该 id 存储在服务器中。例如，如果 id 是 4 那么图像将是 4.jpg 所以我使用这段代码来显示工具提示： p>

$('.tipsy').tipsy({
        html: true,
        gravity : 'e',
        title: function() {
            var i=0;
            alert(++i + "   first");
            var imgPath='<img height="50" width="50" src="dp/' + $(this).attr('id') + '.jpg" />';
            try{
                imgPath=$(imgPath).error(function() {
                    alert(++i + "  middle");
                    //imgPath='<img height="50" width="50" src="dp/no-image.jpg" />';
                });
            }catch(err){
                alert('inside catch');
            }
            alert(++i + "   last");
            return imgPath; 
        }
    });

但 imgPath 永远不会出现 但从技术上讲如果 error 存在，则将采用 noimage.jpg 的值，但每次它都会向我显示带有 src 的 img 为 .jpg

还有一件事我注意到了......没有错误时的顺序是：

1. alert(++i + "first");

2. alert(++i + "last");

   以及出现错误时的顺序：

   1. 警报(++i + "第一");
   2. 警报(++i + "最后");
   3. alert(++i + "middle");

这是错误的，因为 middle 警报介于 first 和 last

之间

Answer 1

我真的不知道为什么没有捕获异常。但是对于工具提示上的任何动态内容，您可以尝试这些插件：

http://craigsworks.com/projects/simpletip/

http://jquery.bassistance.de/tooltip/demo/

希望对您有所帮助。

Answer 2

您的错误函数似乎由于某种原因被异步调用。我不确定为什么会发生这种情况，可能它可能在 jquery 文档中，但你可以做的是使用 ajax() 函数强制同步检查

alert("first");
var imgPath; //not setting imgPath here
        try{ 
            //using ajax() instead of earlier code
            $.ajax({
                url: 'dp/' + $(this).attr('id') + '.jpg', //might need to give absolute path instead of relative one
                type: 'get',
                async:false, //making sync call to ensure this code is executed
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    imgPath='no-image.jpg'; //if image doesnt exists then set no-image
                    alert("middle-error");
                },
                success: function(data){
                    imgPath='dp/' + $(this).attr('id') + '.jpg'; //succes -set required                    
                    alert("middle-success");
                }
            });
        }catch(err){ 
            alert('inside catch'); 
        } 
alert(" last"); 

我们在这里做的是检查图像，例如dp/4.jpg 存在于服务器上。我们还通过设置 async:false 来强制 sync 这次调用