Canvas崩溃Chrome浏览器

时间:2014-07-21 18:05:33

标签: javascript jquery arrays canvas

我正在开发一种网络体验,允许您通过在浏览器上来回滚动来浏览静止图像。 我遇到的问题是,当我滚动时Chrome会偶尔崩溃。 这不会在Firefox中崩溃,所以我假设我正在做一些Chrome不喜欢的事情。有什么想法吗?

$( document ).ready(function() {

"use strict";

//loading array function
function preLoad(file, total_array, arrayme, type){
    for(var i = 1; i < total_array; i++) {
      var img = new Image();
      var file_entry = file + i +type;
      console.log(file_entry);
      img.src = file_entry;
      arrayme.push(img);
    }
}

var images = new Array();
var size = 899;
var filename = 'http://t-mrkt.com/Lab/media/MASTER_COMP_';
var file_type =".png";

preLoad(filename,size,images,file_type);

var canv = document.getElementById('background');
var context = canv.getContext('2d');

$(canv)
    .width($(window).width())
    .height($(window).height());

var currentLocation = 0;
//variable for 1/4 proportion 
var arr = Math.floor(images.length/4);

var lastScroll = 0;
var maxScrollLeft = document.getElementById('all').scrollWidth - 
                    document.getElementById('all').clientWidth;

$(window).on('scroll', function(e) {
    var window_loc = $(this).scrollLeft();
    if (window_loc > lastScroll) {
        if (window_loc - lastScroll < 10) {
            currentLocation += 1;
        }
        if (window_loc - lastScroll > 10) {
            currentLocation += 10;
        }          
    }

    if (window_loc < lastScroll) {
        if (window_loc - lastScroll > -10) {
            currentLocation -= 1;
        }
        if (window_loc -lastScroll < -10) {
            currentLocation -= 10;  
        }
    }

    if (currentLocation < 0) {
        currentLocation = 0;
        window_loc = $('body').scrollLeft(0);
        console.log("less than zero");
    }

    if (currentLocation > images.length-1) {
        currentLocation = images.length-1;
        window_loc = $('body').scrollLeft(maxScrollLeft);
        console.log("more than full length");
    }

    //updating value to latest 
    lastScroll = window_loc;
    setImage(currentLocation);

});

function setImage(newLocation) {
    context.drawImage(images[newLocation], 0, 0, canv.width, canv.height);
    console.log(images.length + "length of images");
}

});

0 个答案:

没有答案