我有一个视差单页滚动,响应式投资组合,有许多不同的项目。 如果访问者点击项目,每个项目都会激活一个最多包含15个图像的模态。
我在开始时使用JavaScript有一个带有GIF的加载开始动画,因此访问者只有在加载整个页面时才能看到网站,甚至只有当用户点击项目时才出现的每个项目内的图像(它是一页滚动):
$(window).load(function() {
$(".loader").fadeOut("slow");
})
由于图片众多,目前需要30秒到1分钟才能访问投资组合
有人知道如何: - 首先加载一些图像(主页的背景,每个项目的缩略图等) - 仅在加载这些图像时才将加载屏幕保留在开头 - 加载这些图像时加载开始屏幕消失,以便访问者可以开始浏览投资组合,因此不必等待30秒 - 当他浏览页面时继续加载其他图像(所以现在加载仅当访问者在访问" main"页面时点击项目时出现在模态内的图像)
感谢您的帮助!
答案 0 :(得分:0)
img
代码包含load
个事件。例如,你可以控制它们
考虑你的图像有.preloaded-image
类,我们为每个图像制作一个标记
知道加载了哪个项目。我们会为每个类添加一个类image-loaded
,
当图像加载完成时:
$('.preloaded-image').on('load', function () {
// set the flag
$(this).addClass('image-loaded');
// run the callback
showPage();
});
function showPage() {
// we check for all images
// if all images has loaded
// we'll show the page
var items = $('.preloaded-image').length;
var loaded = $('.image-loaded').length;
// if items and loaded are equal
// all images has loaded
if (items != loaded) {
// do nothing as all images hasn't loaded yet
return;
}
// all images has loaded
// show the page
alert('I will show the page');
}