jquery - 加载程序 .gif 过早隐藏

Question

我想做什么？

我试图在图像从 Flickr 的服务器拉入水轮转盘时显示加载器图像。一旦图像集最终加载到 accordion 和 waterwheel 中，加载器图像将被隐藏。

问题是什么？

加载器图像过早隐藏，这导致无法向用户提供图像仍在加载的指示。图片需要 6 到 10 秒才能加载到 Accordion 的每个部分，这段时间足以让用户离开页面。

我已经看到这个问题在 Firefox 和 Chrome 中都出现了。奇怪的是，在一些非常罕见的情况下，加载器图像实际上会一直保持到图像完全加载为止。

我做了什么？

我在我的两个 JavaScript 函数中试验了 $("#loader").hide(); 的位置。

1. 在函数回调中，但在使用配置设置调用水车插件之后。
2. 在函数回调之外，但在 displayContent() 内。
3. 无处可去。我想我希望它会在加载图像后自动隐藏...:P

您可以查看照片库和标记/脚本 here .以下是主要脚本和标记。

HTML

<!-- lines 348-364 -->
<!-- Tabs -->
<ul id="tabs">
    <li><a href="#" name="tab1">Glass Windows</a></li>
    <li><a href="#" name="tab2">Lampshades</a></li>
    <li><a href="#" name="tab3">Metal and Glass Sculptures</a></li>
    <li><a href="#" name="tab4">Pi&ntilde;atas</a></li>
    <li><a href="#" name="tab5">Wood Sculptures</a></li>
</ul>
<!-- Content in the accordion -->
<div id="content">
    <img src="images/loader.gif" id="loader"/>
    <div id="tab1" class="thumbs"></div>
    <div id="tab2" class="thumbs"></div>
    <div id="tab3" class="thumbs"></div>
    <div id="tab4" class="thumbs"></div>
    <div id="tab5" class="thumbs"></div>
</div>

JavaScript

// lines 264-293
//
$('#' + tabName).jflickrfeed({
    limit: 20,
    qstrings: {
        set: photoSet,
        nsid: '85496792@N03'
    },
    useTemplate: false,
    itemCallback: function(item){
            $(this).append("<a href='" + item.link + "' target='" + "_blank'" + ">" 
                         + "<img src='" + item.image_n + "' alt=''/></a>");
    }
}, function (data) {

    // Special carousel stuff to make the
    // showcase look spiffy
    //
    $('#' + tabName).waterwheelCarousel({
        speed: 500,
        separation: 200,
        flankingItems: 3
    }).css('position', '');

    // Once the waterwheel is finished loading
    // we can hide the loader
    //
    $("#loader").hide();
});

注意:该网站目前仍在进行“响应式”测试，因此在不同的屏幕尺寸上看起来可能有点粗糙...

Answer 1

我想我知道问题出在哪里... jflickerfeed 获取图像的数据而不是图像，因此，您添加它们，然后浏览器才发出请求以实际获取图像。因此，您看到的延迟是实际从闪烁服务器下载的图像。现在，如果是这种情况，您需要将一些东西绑定(bind)到图像的加载事件并计算您有多少。像这样:

total_images = 0;
loaded_images = 0;
$('#' + tabName).jflickrfeed({
    limit: 20,
    qstrings: {
        set: photoSet,
        nsid: '85496792@N03'
    },
    useTemplate: false,
    itemCallback: function(item){
            total_images = total_images+1;
            img = $('<img>').on('load',function(){
              loaded_images = loaded_images+1;
              it (total_images == loaded_images) $('#loader').hide();
            }).attr('src',item.image_n);
            anchor = $('<a>').attr('href',item.link).attr('target','_blank');
            anchor.append(img);
            $(this).append(anchor);
    }
}, function (data) {

    // Special carousel stuff to make the
    // showcase look spiffy
    //
    $('#' + tabName).waterwheelCarousel({
        speed: 500,
        separation: 200,
        flankingItems: 3
    }).css('position', '');
});

我不确定这是否是问题所在，但它是有道理的:P

编辑:您需要稍微考虑一下，因为您有多个选项卡，但这就是想法