时间戳

首页 > 解决方案 > 动画在预加载 CSS 和图像之前开始

javascript - 动画在预加载 CSS 和图像之前开始

问题描述

我用一个包含一些图像（作为背景图像）的 CSS 文件创建了一个 jquery 动画。

为了确保在开始动画之前加载图像（也为了防止渲染阻塞 css 文件），我动态添加了 CSS 文件。我等待 CSS 文件完全加载，并且我对图像使用预加载技术，但都失败了。当我在慢速网络连接中测试动画时，动画开始工作并且在动画期间正在加载图像。这是我的代码逻辑：

  1. 我等待加载 CSS（第一个代码块）。
  2. 我开始预加载图像。( loadImages())
  3. 我在加载所有图像时开始动画（startAnimation()）：

JS代码：

//Preloading CSS file before the animation starts:

var link = document.createElement('link');
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.onload = function(){ loadImages(); } // also tried loadImages without ()
link.setAttribute("href", 'banner.css');
document.getElementsByTagName("head")[0].appendChild(link);


//PreLoading images I used in banner.css

var sumImage=0;

function loadImages(){
    var imageFiles=[];
    var images=["map1","map2","map3"];
    for (var i=0; i<images.length; i++){
        imageFiles[i] = new Image();
        imageFiles[i].onload= sumImages(); // also tried sumImages without ()
        imageFiles[i].src="banner/"+ images[i] +".png";
    }
}   

function sumImages(){
    sumImage++ ;
    //Starting animation when I ensure that all 3 images are loaded
    if (sumImage== 3){startAnimation();}
}

我在打电话时也删除了括号sumImages()，loadImages()因为我的问题被标记为这个问题的重复，但没有任何改变。

标签： javascript

解决方案

推荐阅读