jQuery仅在刷新页面时工作

当我将连接到此jQuery代码（如下）的网页放入时，图像滑块将不工作，除非我先刷新页面，然后单击图像滑块上的箭头，它将浏览图像。有没有人对我需要在这段代码中修改什么以使其工作有任何见解？？谢谢

$(window).load(function(){

// We are listening to the window.load event, so we can be sure
// that the images in the slideshow are loaded properly

// Testing whether the current browser supports the canvas element:
var supportCanvas = 'getContext' in document.createElement('canvas');

// The canvas manipulations of the images are CPU intensive,
// this is why we are using setTimeout to make them asynchronous
// and improve the responsiveness of the page.

var slides = $('#slideshow li'),
    current = 0,
    slideshow = {width:0,height:0};

setTimeout(function(){

    window.console && window.console.time && console.time('Generated In');

    if(supportCanvas){
        $('#slideshow img').each(function(){

            if(!slideshow.width){
                // Taking the dimensions of the first image:
                slideshow.width = this.width;
                slideshow.height = this.height;
            }

            // Rendering the modified versions of the images:
            createCanvasOverlay(this);
        });
    }

    window.console && window.console.timeEnd && console.timeEnd('Generated In');

    $('#slideshow .arrow').click(function(){
        var li          = slides.eq(current),
            canvas      = li.find('canvas'),
            nextIndex   = 0;

        // Depending on whether this is the next or previous
        // arrow, calculate the index of the next slide accordingly.

        if($(this).hasClass('next')){
            nextIndex = current >= slides.length-1 ? 0 : current+1;
        }
        else {
            nextIndex = current <= 0 ? slides.length-1 : current-1;
        }

        var next = slides.eq(nextIndex);

        if(supportCanvas){

            // This browser supports canvas, fade it into view:

            canvas.fadeIn(function(){

                // Show the next slide below the current one:
                next.show();
                current = nextIndex;

                // Fade the current slide out of view:
                li.fadeOut(function(){
                    li.removeClass('slideActive');
                    canvas.hide();
                    next.addClass('slideActive');
                });
            });
        }
        else {

            // This browser does not support canvas.
            // Use the plain version of the slideshow.
            current=nextIndex;
            next.addClass('slideActive').show();
            li.removeClass('slideActive').hide();
        }
    });

},100);

// This function takes an image and renders
// a version of it similar to the Overlay blending
// mode in Photoshop. 
// **NOTE: REMOVED COLOR CHANGES

function createCanvasOverlay(image){

    var canvas          = document.createElement('canvas'),
        canvasContext   = canvas.getContext("2d");

    // Make it the same size as the image
    canvas.width = slideshow.width;
    canvas.height = slideshow.height;

    // Drawing the default version of the image on the canvas:
    canvasContext.drawImage(image,0,0);


    // Taking the image data and storing it in the imageData array:
    var imageData   = canvasContext.getImageData(0,0,canvas.width,canvas.height),
        data        = imageData.data;

    // Putting the modified imageData back to the canvas.
    canvasContext.putImageData(imageData,0,0);

    // Inserting the canvas in the DOM, before the image:
    image.parentNode.insertBefore(canvas,image);
}

//end of window load    
});

$（窗口）.load（函数（）{
//我们正在侦听window.load事件，因此可以确定
//幻灯片中的图像是否已正确加载
//测试当前浏览器是否支持画布元素：
var supportCanvas='getContext'在document.createElement（'canvas'）中；
//图像的画布操作是CPU密集型的，
//这就是为什么我们使用setTimeout使它们异步
//并提高页面的响应能力。
var slides=$（“#slideshow li”），
电流=0，
幻灯片放映={宽度：0，高度：0}；
setTimeout（函数（）{
window.console&&window.console.time&&console.time（'Generated In'）；
如果（支持画布）{
$（'#幻灯片显示img'）。每个（函数（）{
如果（！slideshow.width）{
//获取第一幅图像的尺寸：
slideshow.width=this.width；
slideshow.height=this.height；
}
//渲染图像的修改版本：
createCanvasOverlay（这个）；
});
}
window.console&&window.console.timeEnd&&console.timeEnd（'Generated In'）；
$（'#slideshow.arrow'）。单击（函数（）{
var li=滑动。等式（电流），
canvas=li.find（'canvas'），
nextIndex=0；
//取决于这是下一个还是上一个
//箭头，相应地计算下一张幻灯片的索引。
if（$（this）.hasClass（'next'））{
nextIndex=当前>=幻灯片。长度-1？0:当前+1；
}
否则{
nextIndex=current我过去在
$（window）.load（）
方面的结果不好。我的经验是，加载事件通常根本不会触发，例如，如果浏览器认为页面已缓存。这可以解释为什么硬刷新似乎可以解决您的问题

我的建议是不要依赖它，而是使用
$（document.ready（）
。
为什么不使用
$（document.ready（）
？@Jan你的意思是
$（document.ready（）
？）或者是
$（document.ready（）
，或者它的较短版本
$（）
$）。ready（）{

或者

（$）{

做了同样的事情吗？我尝试改用$document.ready（），现在即使刷新页面也无法使滑块工作。这可能是调用图像加载的方式吗？@Shub我也遇到了同样的问题，并将$（window.load（）更改为$（document.ready（））对我也不起作用，刷新时根本没有加载滑块…你最终解决了这个问题吗？@starkey01这可能会解决你的问题：