在联机时检查Offline.js？

Question

下面是我的代码。

简单地说，我不知道如何使它在连接从在线转换到离线时，更新css (https://github.com/hubspot/offline)的事件将被触发。

如果它从离线转到在线，那么它会在10秒内更新。但我不确定如何让它在另一个方向上工作？

似乎如果我手动调用Offline.check()，它就会更新，但理想情况下，我希望它自动完成此操作。欢迎任何想法。

Offline.options = {
    checkOnLoad: true,
    checks: {
        image: {
            url: 'http://example.com/image.gif'
        },
        active: 'image'
    },
    reconnect: {
        initialDelay: 10, // only check every 10 seconds
        delay: 10
    }
};

Answer 1

您可以使用Offline.on(event, handler, context)来了解连接何时联机/脱机。

就像连接离线一样

Offline.on('up', function gotOnline(){
  console.log("I am online");
})

Offline.on('down', function gotOffline(){
  console.log("I am offline");
})

Answer 2

如果您阅读文档here，您可以看到offline具有某些属性，如Offline.check()、Offline.state。

您可以使用这两个选项中的任何一个来显示所需的CSS。

为例：

if(Offline.state=='down'){
    /*assuming that you have that div in your css set to hidden or something else*/
    $("#offlineDiv").show('100'); //Just an imaginary div
}

然后当连接离线时..使用

offline.on(down, handler)..

现在这个处理程序利用上面的CSS开关来激活那个div。

Answer 3

下面是我使用三元运算符的代码

​

connectionStatus = navigator.onLine ? 'online' : 'offline';
console.log(connectionStatus);

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

​