在ajax嵌入式图像链接上工作的jquery图像预览?

时间:2010-01-17 03:36:57

标签: javascript jquery ajax plugins frontend

有各种好的jquery图像预览插件。但是,我测试过的所有这些都没有用于使用ajax嵌入DOM的图像链接。

我已经测试过使用jquery live功能,但它无法正常工作。

$('a.preview').live('mouseover', function() {
    $(this).imgPreview({
        imgCSS: {
            //width: '200px'
        },
        preloadImages:      'true',
    });
});

我正在使用这个:http://www.webresourcesdepot.com/jquery-image-preview-plugin-imgpreview/

问题是我必须使用jquery live,如上所示。但有2个缺陷。

  1. 如果我在第一次显示预览时将鼠标移到缩略图上,我想这是因为我还没有提取图像。所以我必须将鼠标移离图像并再次返回图像,然后才会显示出来。这非常烦人。

  2. 它不会预加载图像。如果你在他们的网站上查看,他们会这样使用它:

    $( 'a.preview')。imgPreview({         preloadImages:'true', });

  3. 这将在DOM完全加载后预加载所有预览。但我已经封装了这个功能。但即使我没有,它也不能导致我在加载DOM之后用ajax添加这些图像链接。

    我想知道是否有人知道一个插件可以在装载ajax的元素上做同样的事情,包括预览和预加载。

    感谢。

2 个答案:

答案 0 :(得分:2)

将它添加到鼠标悬停将无济于事,因为重点是在图像被鼠标悬停之前预先加载图像...(以便鼠标悬停时它们可用)..

您应该在将新链接(从ajax)附加到dom后立即添加$('a.preview').imgPreview(...)

答案 1 :(得分:1)

使用相同的插件和ajax这完美地工作:

.
.
.
$.post("ajax/showAlbum.php", { directory: "whatever" },
   function(data) {$('#first').append(data);
$('#first a').imgPreview({
    preloadImages:      'true',
    });
.
.
.
相关问题