Question

我有工具提示，在图像悬停时显示，工具提示的内容是较大版本的悬停图像..

问题：工具提示中的图像加载缓慢..如何在Tootip中加载图像之前如何显示加载程序？

<img id="small-img" title= "<img id='big-img' src=<?=getResizedImage(imageId, 500);?>>" src="<?= getResizedImage(imageId, 150); ?>" />

Answer 1

我会用image包裹container并为`容器添加background-image。如果我理解正确你的img-big会在工具提示中显示出来吗？

Answer 2

我通过移动标题＆＃39;的内容解决了这个问题。到其他DIV（＆＃39;工具提示内容＆＃39;）..

下面是我的修复，它显示了工具提示中的div。

//Image to be hovered to show Tooltip
<img id="small-img" src="<?= getImage(imageId, 150); ?>" />

//Contents to be displayed in Tooltip.
<div id="tooltip-contents" style="display:none;">
    <img src='<?= getImage(imageId, 500); ?>'/>
</div>

//Contents of .js
$('#small-img').attr('title', function(){
    return $('#tooltip-contents').html();
});

$("#small-img").tooltip({
    options : {
        content : function() {
            return $(this).prop('title');;
        }
    }
});

在jquery UI工具提示中显示加载效果

2 个答案: