我正在开发一种网络体验,允许您通过在浏览器上来回滚动来浏览静止图像。 我遇到的问题是,当我滚动时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");
}
});