Question

我搜索了很多关于类似事情的问题。但似乎没有一个适合我的情况。

我有几个不同的背景图片。现在我手动创建基于背景图像的渐变并将其设置为默认值。并在3秒后将背景图像加载到默认渐变上。

但我不想要这种方法。我想只在用户连接良好时才显示图像。或者根本不显示图像，让那个背景图像的渐变在那里。

代码示例：CSS

.test1 {
    background-image: -webkit-gradient(linear, 0 0, 86 148, color-stop(0.011, #898568));
    background-image: -webkit-linear-gradient(300.1600608380871deg, #898568 1.1%);
    background-image: -moz-linear-gradient(300.1600608380871deg, #898568 1.1%);
    background-image: -o-linear-gradient(300.1600608380871deg, #898568 1.1%);
    background-image: linear-gradient(149.83993916191292deg, #898568 1.1%)
}

.test1-img {
    background-image: url("img1.jpg");
}

代码示例：JS

setTimeout(function() {

$('#test1-div').toggleClass('test1-img');

}, 3000);

那么可以在jQuery或JS中执行此操作吗？或任何插件？

PS：我不想要延迟加载算法。导致它在用户进入视口时加载图像，即使他们的网络连接较低。对我来说，我不想为低速连接显示背景图像。

PS2：我是新的JS，所以使用解释的工作解决方案对我来说非常有用。

Answer 1

如果您在尝试加载单张图片时表现良好，可以尝试以下内容：

window.speedyConnection = false;

var image = document.createElement("img");
image.onload = function () {
    window.speedyConnection = true;
    //Load your images here
}
image.src = "img1.jpg";

setTimeout(function () {
    if (!window.speedyConnection) {
        image.remove();
    }
}, 750);

您的想法是尝试加载第一张图片，但如果它没有加载750毫秒（或您喜欢的任何超时），您会认为用户连接错误并停止加载。如果它确实加载了，你继续加载剩下的图像。

但是，这至少需要发送一个图像请求并接收一些数据（即使在慢速连接上），但它只适用于单个图像，您可以在超时后取消它。

如果Internet Speed是高负载图像或根本不加载

1 个答案: