使用 jQuery 自动完成加载图像

发布于 2024-10-10 13:10:14 字数 234 浏览 0 评论 0原文

我正在使用 jQuery 自动完成插件来显示用户列表及其来自我的数据库的照片。当我显示没有用户图像的结果时，自动完成速度非常快。然而，对于图像，图像需要一些时间来加载和显示。据我了解，图像会被下载然后显示。然而在 Facebook 中，图像是即时显示的。据我所知，facebook 使用高配置服务器来返回值，并使用一些其他技术来显示图像。有没有一种方法可以将我的图像存储在数据库或其他可以立即访问的地方？我正在使用 Web 服务以 json 格式返回值。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

芯好空 2024-10-17 13:10:14

您可以尝试在加载文本数据后加载图像。
例如，您可以使用包含 URL 的 attr img_source 创建空白图像 () 的结果到真实图像（）。还向 open 事件添加将显示图像的功能。

简单的例子（这只是例子，我没有测试它）

$(function() {
    function showImages(){
        $(".searchThumb").each(function(){
            $(this).arrt("src", $(this).attr("img_source"));
        });
    }
    $( "#birds" ).autocomplete({
        source: "search.php",
        minLength: 2,
        open: showImages()
    });
});

UPD

$(function() {
    function showImages(){
        $(".searchThumb").each(function(){
            $(this).arrt("src", $(this).attr("img_source"));
        });
    }
    function formatItemFn(row,pos,count,term){
        // Here is formatting like I described before
        if (pos==count) showImages();
    }
    $( "#birds" ).autocomplete({
        source: "search.php",
        minLength: 2,
        formatItem: formatItemFn()
    });
});

You can try loading images after text data loaded.
For example you can create results with blank images (<img class="searchThumb" src="blank.gif"/>) with attr img_source which will contain URL to real image (<img class="searchThumb" src="blank.gif" img_source="/real_img_url.jpg"/>). Also add function to open event which will show images.

Simple example (it's just example and I didn't test it)

$(function() {
    function showImages(){
        $(".searchThumb").each(function(){
            $(this).arrt("src", $(this).attr("img_source"));
        });
    }
    $( "#birds" ).autocomplete({
        source: "search.php",
        minLength: 2,
        open: showImages()
    });
});

UPD

$(function() {
    function showImages(){
        $(".searchThumb").each(function(){
            $(this).arrt("src", $(this).attr("img_source"));
        });
    }
    function formatItemFn(row,pos,count,term){
        // Here is formatting like I described before
        if (pos==count) showImages();
    }
    $( "#birds" ).autocomplete({
        source: "search.php",
        minLength: 2,
        formatItem: formatItemFn()
    });
});

回复收藏 0 原文