Question

我们从Picasa中获取一些图像数据，使用yoxview并在获取数据时获取图像缩略图。

我们显示预加载器图像。

现在，数据是动态获取的，有时我们请求的获取网址没有结果。所以div的Image预加载器一直在呼呼......主要是因为数据无法加载。

所以我的问题是，如果在5秒钟内没有找到结果，同时显示预加载器，我们是否可以启动超时，并显示覆盖预加载器的占位符图像，并显示消息..无法获取提要此时的内容??

我们的代码是这样的：

$(document).ready(function(){
    $("#yoxview_picasa").yoxview({ 
        dataUrl: 'http://picasaweb.google.com/lh/view?q=<?=$randomResult["suburb"];?>+<?=$randomResult["state"];?>',
        dataSourceOptions: {
            "max-results": 21,
                imgmax: 800
                },
                onLoadBegin:function(){
                $('.imagecontainerburbs').hide();
                $('<div class="loading" style="width: 580px; height: 250px;position:relative;margin-top:100px;margin-bottom:-250px;"><center><img src="http://www.pathToPreloaderImage.com/css/images/422.gif" alt="loading"/><br /></center></div>').insertAfter('.imagecontainerburbs');
                },
                onLoadComplete:function(){
                $('.loading').remove();
                $('.imagecontainerburbs').find("img").css({'width':'64px','height':'64px'});
                $('.imagecontainerburbs').find("img").createLoader();
                $('.imagecontainerburbs').fadeIn();
                }
            });
        });

如您所见，我们使用一个漂亮的php片段来传播数据网址。

本质上，数据是这样提取的。

url：picasa.google.com/lh/view？我们将查询郊区和状态添加到网址。

因此，如果我们ping picasa以获得随机结果，并且没有结果..当前加载器动画会持续显示，我需要做的是如果没有提取数据，则启动占位符，指出无法获取数据在这个时候或其他什么。

有什么建议吗？

修改/更新 的鉴于以下建议，我应该像这样添加我的代码吗？

onLoadBegin:function(){
    timer = setTimeout(function() {
     // get no data in 20 seconds perform something
    $('<img src="http://path to image file.com/placeholder.png">'),
},20*1000);

Answer 1

我在yoxview文档中没有看到任何类型的超时选项。如果他们在内部有超时，则可能会触发处理程序onLoadError或onLoadNoData。您可以首先使用处理程序，然后查看它是否被调用。您还可以查看源代码并查看它们是否正在使用任何超时。

如果没有，你可以实现自己的。

$(document).ready(function(){
    $("#yoxview_picasa").yoxview({ 
        var timer;
        dataUrl: 'http://picasaweb.google.com/lh/view?q=<?=$randomResult["suburb"];?>+<?=$randomResult["state"];?>',
        dataSourceOptions: {
            "max-results": 21,
                imgmax: 800
        },
        onLoadBegin:function(){
            timer = setTimeout(function() {
                // got no data in 20 seconds here, decide what to do
            }, 20*1000);
            $('.imagecontainerburbs').hide();
            $('<div class="loading" style="width: 580px; height: 250px;position:relative;margin-top:100px;margin-bottom:-250px;"><center><img src="http://www.pathToPreloaderImage.com/css/images/422.gif" alt="loading"/><br /></center></div>').insertAfter('.imagecontainerburbs');
        },
        onLoadComplete:function(){
            clearTimeout(timer);
            $('.loading').remove();
            $('.imagecontainerburbs').find("img").css({'width':'64px','height':'64px'});
            $('.imagecontainerburbs').find("img").createLoader();
            $('.imagecontainerburbs').fadeIn();
        }
    });
});

Answer 2

好的我们想通了，实际上非常简单。

onNoData:function(){
                $('.imagecontainerburbs').hide();
                $('.loading').hide();
                $('<div class="nodata" style="width: 580px; height: 250px;position:relative;margin-top:100px;margin-bottom:-250px;"><center><p>We cannot load data from this suburb, please refresh page and try again.</p><br /></center></div>').insertAfter('.imagecontainerburbs');
                },

如果预加载器无法加载内容

2 个答案: