适用于ajax嵌入式图像链接的jquery图像预览?

2022-01-19 00:00:00 frontend jquery javascript ajax plugins

那里有各种优秀的 jquery 图像预览插件.但是，我测试过的所有链接都没有在使用 ajax 嵌入到 DOM 中的图像链接上工作.

there are various good jquery image preview plugins out there. however, all of the ones i've tested havent worked on image links that are embedded in the DOM with ajax.

我已经测试过使用 jquery live 功能，但它不能完美地工作.

i have tested use jquery live feature, but it doesnt work flawless.

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

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

问题是我必须像你在上面看到的那样实时使用 jquery.但有两个缺陷.

the problem is that i have to use jquery live as u see above. but there is 2 flaws.

  1. 如果我第一次将鼠标移到缩略图上时它没有显示预览，我想那是因为我还没有获取图像.所以我必须将鼠标从图像上移开并再次回到图像上，然后才会显示出来.这很烦人.

  1. if i move the mouse over the thumbnail the first time it doesnt show the preview, i guess that is because i hasnt fetched the image yet. so i have to move the mouse away from the image and back over the image again, then it'll be shown. and that is very annoying.

它不会预加载图像.如果您在他们的网站上查看他们正在使用它，而不是这样:

it doesnt preload the images. if you check on their website they are using it like this instead:

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

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

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

and that will preload all previews after DOM is fully loaded. but i have encapsulated the function. but even if i didnt, it cant cause i add these image links with ajax AFTER DOM is loaded.

我想知道是否有人知道一个插件可以对 ajax 加载的元素执行相同的操作，包括预览和预加载.

i wonder if someone knows about a plugin that could do same stuff on ajax-loaded elements, both preview and preload.

谢谢.

推荐答案

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

adding it to the mouseover will not help, as the whole point is to preload the images before they get moused over ... (so that they are available at mouseover)..

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

you should add the $('a.preview').imgPreview(...) right after you attach the new links (from ajax) to the dom ..

相关文章