Question

我想做什么？

我正在尝试显示装载机图像，同时将图像从Flickr的服务器拉入水车旋转木马。一旦图像集最终加载到手风琴和水车中，加载器图像将被隐藏。

有什么问题？

加载程序图像过早隐藏，这导致没有向用户提供图像仍在加载的指示。图像需要6-10秒才能在手风琴的每个部分内加载，这足以让用户离开页面。

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

我做了什么？

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

在函数回调中，但在使用配置设置调用水轮插件后。
在函数回调之外，但在displayContent()内。
无处。我想我希望它会在图像加载后自动隐藏......：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获取图像的数据而不是图像，因此，您添加它们，然后浏览器才会执行实际获取图像的请求。因此，您看到的延迟是实际从闪烁服务器下载的图像。现在，如果是这种情况，您需要将某些内容绑定到图像的加载事件并计算您拥有的数量。像这样：

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

编辑：你需要考虑一下因为你有多个标签，但这就是想法

Answer 2

我会在你的$('#' + tabName).jflickrfeed({});函数

中尝试这样的事情

 itemCallback: function(item){
        $("#loader").show(); //Show the loading Icon
        $(this).append("<a href='" + item.link + "' target='" + "_blank'" + ">" 
                     + "<img src='" + item.image_n + "' alt=''/></a>");
}

然后将$("#loader").hide();保留在脚本的末尾也许在第一个图像加载后，它隐藏了加载器img，但从未被触发显示其余的图像。

显而易见，闪烁馈送功能一个接一个地调用每个图像。

Answer 3

完全忽略了Image对象中的complete功能。这似乎有效，虽然它在Opera和Safari中有点错误，因此所有“隐藏”代码在底部的条件块中进行的原因。

$('#' + tabName).jflickrfeed({
        limit: 10,
        qstrings: {
            set: photoSet,
            nsid: '118934683@N02'
        },
        useTemplate: false,
        itemCallback: function(item) {

        // Where all the action is...
        //
        $(this).append("<a class=\"fancybox\" href='" + item.image_b + "' title='(ID# " + item.title + ")'>" + "<img src='" + item.image_n + "' alt='image'/></a>");

        // Store the source of the image and convert it
        // to a string.  Keep track of the count too
        //
        var img = new Image();
        img.src = item.image_n.toString();

        photoCount++;

        // Hide loader gif
        //
        if (photoCount == 10 && img.complete === true) {
            $('#loader').css('visibility', 'invisible');
            $('#loader').css('top', 10000).css('left', 10000);
            $('#loader').hide();
        }
    }
});

装载机.gif过早隐藏

3 个答案: