的jquery - 延迟加载 - 设置延迟

我以下这个教程的jquery - 延迟加载 - 设置延迟

https://www.resrc.it/demos/lazyload

，这是我使用

<script src="https://use.resrc.it/0.9"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
<script src="https://rawgit.com/resrcit/ReVIEW/master/jquery.review-1.0.0.min.js"></script> 
<script> 
    $(document).ready(function() { 
    resrc.ready(function() { 
     $('.resrc').review({ 
     callback : function() { 
      resrc.run(this); 
     } 
     }); 
    }); 
    });

上述用于延迟加载的图像的代码并将其被称为使用：

<img data-src="http://app.resrc.it/o=95/http://www.your-site.co/image.jpg" alt="An awesome dog" class="resrc"/>

在我的例子中我有10个图像，我想要2秒通过之前加载下一个图像。我不确定在哪里放置jQuery的setTimeout函数。当我放置它延迟了2秒，比没有任何延迟地加载所有图像。我想它加载图像1等待2秒，加载图像2等待2秒，加载图像3等待2秒，等等...

来源

2017-05-28 user6043723

这是更多的香草JS解决方案比实际的解决方案，然而，，对于10张图片的情况，如果你想改变它的显示设置，延迟加载可能会限制你超出必要的范围，所以也许你仍然会考虑这一点。

如果您愿意，也可以将timedImg();初始化放入jQuery $(document).ready();中。

function timedImg() { 
 
    var image1 = document.getElementById("img1"), 
 
    image2 = document.getElementById("img2"), 
 
    image3 = document.getElementById("img3"), 
 
    image4 = document.getElementById("img4"), 
 
    image5 = document.getElementById("img5"), 
 
    image6 = document.getElementById("img6"), 
 
    image7 = document.getElementById("img7"), 
 
    image8 = document.getElementById("img8"), 
 
    image9 = document.getElementById("img9"), 
 
    image10 = document.getElementById("img10"); 
 
    setTimeout(function() { 
 
    image1.style.visibility = "visible" 
 
    }, 0); 
 
    setTimeout(function() { 
 
    image2.style.visibility = "visible" 
 
    }, 2000); 
 
    setTimeout(function() { 
 
    image3.style.visibility = "visible" 
 
    }, 4000); 
 
    setTimeout(function() { 
 
    image4.style.visibility = "visible" 
 
    }, 6000); 
 
    setTimeout(function() { 
 
    image5.style.visibility = "visible" 
 
    }, 8000); 
 
    setTimeout(function() { 
 
    image6.style.visibility = "visible" 
 
    }, 10000); 
 
    setTimeout(function() { 
 
    image7.style.visibility = "visible" 
 
    }, 12000); 
 
    setTimeout(function() { 
 
    image8.style.visibility = "visible" 
 
    }, 14000); 
 
    setTimeout(function() { 
 
    image9.style.visibility = "visible" 
 
    }, 16000); 
 
    setTimeout(function() { 
 
    image10.style.visibility = "visible" 
 
    }, 18000); 
 
} 
 

 
timedImg();

img { 
 
    visibility: hidden; 
 
}

<img src="https://placehold.it/100x100" alt="An awesome dog" id="img1" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img2" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img3" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img4" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img5" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img6" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img7" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img8" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img9" /> 
 
<img src="https://placehold.it/100x100" alt="An awesome dog" id="img10" />

来源

2017-05-28 15:41:08 Syden

的jquery - 延迟加载 - 设置延迟

回答

相关问题