Question

我有2个路径项数组：

var images = [
    imgPath + 'earth-png/a1.png',
    imgPath + 'earth-png/a2.png',
    ...
var images2 = [
    imgPath + 'eye-lens/01.png',
    imgPath + 'eye-lens/02.png',
    imgPath + 'eye-lens/03.png',
    ...

然后，为了制作包含多个图像的动画，我首先尝试加载它：

this.loadImages = function() {

    if (typeof(Storage) == "undefined" ) {
        console.log("Your browser does not support HTML5 localStorage. Try upgrading.");
        return false;
    } 
    else {
        console.log("Both localStorage and sessionStorage support is there.");
    }

    var totalImg = images.length + images2.length
        i = 0,
        j = 0
        var myImages1 = [];
        var myImages2 = [];

    function loadImgs() {
        if (i < totalImg && (myImages1Storage.length > 0 && myImages2Storage.length > 0)) {
            if (i < 20) {
                $.ajax({
                    type: 'GET',
                    url: images[i],
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: false
                    },
                    complete: function() {
                        myImages1.push(images[i]);
                        i++;
                        loadImgs();                     
                    }
                });
            } else {
                $.ajax({
                    type: 'GET',
                    url: images2[j],
                    crossDomain: true,
                    xhrFields: {
                        withCredentials: false
                    },
                    complete: function() {
                        myImages2.push(images2[j]);
                        j++;
                        i++;
                        loadImgs();                     
                    }
                });
            }
        } else {
            try {
              localStorage.setItem("images1", JSON.stringify(myImages1));
              localStorage.setItem("images2", JSON.stringify(myImages2));
            }
            catch (e) {
                if (e == QUOTA_EXCEEDED_ERR) {
                    console.log("Error: Local Storage limit exceeds.");
                } else {
                    console.log("Error: Saving to local storage.");
                }
            }
        }
    }

    loadImgs();
};

然后，到TimelineMax：

eyeLensAnimation
    .to(obj, 0.5, {
        curImg: images2.length,
        roundProps: "curImg",
        immediateRender: true,
        ease: Linear.easeNone,
        onUpdate: function() {
            //next image on update
            eyePng.src = images2[obj.curImg];
        }
    });

嗯，这是我的问题。

如您所见，我将数据存储在localStorage中。当我使用：

进行数组加载时似乎是成功的

JSON.parse(localStorage.getItem("images1"));

尽管如此，它似乎只适用于Chrome。使用Firefox时，它会在触发动画的时候继续请求获取（滚动时使用scrollmagic）。

那么，我做错了吗？

我应该首先加载存储的数组并使用加载的数组作为动画的路径，否则如果 - 至少 - 请求的路径已经存储在缓存中，它是否会发生？

JavaScript localStorage of image src不适用于Firefox

0 个答案: