Javascript 未在网站上加载图像

我遇到的问题是，当加载页面时，有时会显示所有图像，有时仅显示2个图像，有时显示所有图像。我不知道为什么会这样

有什么想法吗

    $('#banners .box img').each(function(index){
        var randval = (index+1)*100;
        var _this = $(this)
        setTimeout(function(){
            _this.attr('id' , 'banner' + index);
            to_canvas('banner' + index, 300, 223);
        }, randval)
    });

要使用画布功能，请执行以下操作：

    function to_canvas(im,w,h){
        var canvas;
        var imageBottom;
        var im_w = w;
        var im_h = h;
        var imgData;
        var pix;
        var pixcount = 0;
        var paintrow = 0;
        var multiplyColor = [70, 116, 145];
        var x_offset = Math.floor(($('#'+im).attr('width') - im_w)/2);
        var y_offset = Math.floor(($('#'+im).attr('height') - im_h)/2);
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        ctx.drawImage(imageBottom, -x_offset , -y_offset);
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
        $('#'+im).remove();
    }
    function multiply(topValue, bottomValue){
        return topValue * bottomValue / 255;
    }

函数到画布（im、w、h）{
var帆布；
var图像底部；
var im_w=w；
var im_h=h；
var imgData；
var-pix；
var pixcount=0；
var paintrow=0；
var multiplyColor=[70116145]；
var x#u offset=数学地板（$（'#'+im）.attr（'width'）-im#w）/2）；
变量y#u offset=数学地板（$（'#'+im）.attr（'height'）-im#h）/2）；
imageBottom=document.getElementById（im）；
canvas=document.createElement（'canvas'）；
canvas.width=im_w；
canvas.height=im_h；
imageBottom.parentNode.insertBefore（画布，imageBottom）；
ctx=canvas.getContext（'2d'）；
ctx.drawImage（图像底部，-x_偏移，-y_偏移）；
imgData=ctx.getImageData（0，0，canvas.width，canvas.height）；
pix=imgData.data；
对于（变量i=0；iim_w-（im_h-paintrow））{
pix[i]=乘法（多色[0]，pix[i]）；
pix[i+1]=乘法（多色[1]，pix[i+1]）；
pix[i+2]=乘法（多色[2]，pix[i+2]）；
}
如果（像素计数

---

我正在使用canvas函数添加一个具有倍增效果的三角形（如Photoshop）。

在执行脚本之前，将其全部包装在代码中，以确保图像已加载。最初加载页面时，它会缓存图像（将其存储在临时内存中），但不会在呈现所有元素之前。重新加载时，它会从缓存中读取图像，这比再次从服务器中重新读取图像要快得多，因此图像的加载时间与其他操作几乎相同。这会产生可见的图像

正如我所说，要使页面正常工作，请确保所有内容都已加载，然后运行脚本

$(window).load(function(){
    ...your scripts(you can exclude functions definitions from this scope)
}

---

确保已加载图像：

$('#banners .box img').each(function(index, elem){
    var randval = (index+1)*100,
           self = this,
            img = new Image();    // create image object

    img.onload = function() {     // wait until it's loaded
        setTimeout(function(){
            self.id = 'banner' + index;
            to_canvas('banner' + index, 300, 223);
        }, randval)
    }
    img.src = elem.src;          // set source to same as elem
});

---

很遗憾，我没有答案给你，但你有没有试着监控你的网站流量，看看这些图片是否被调用？在Firebug中，“NET”选项卡将显示页面加载时的所有流量-您将能够看到图像是否正在被调用，或正在加载（或失败），或正在被调用并成功加载，在这种情况下，您显示图像的方式中的某个地方出现了错误。我刚刚注意到，图像不会显示，当我刷新页面而不缓存时（ctrl+f5）。但是下载成功（签入firebug）。当您只刷新页面并允许浏览器只缓存（仅F5）时，图像可见。也许这会对你有所帮助。你确定你不应该等到图像加载后，即在你开始使用图像的onload事件之前。加载图像需要一些时间，这就是为什么在你重新加载页面（缓存版本）时，图像会正确显示的原因。你什么时候启动这个过程？我的猜测是，在启动画布代码之前，图像没有完全加载（当图像从第一次缓存到第二次缓存时，它会工作，因为这样它们加载的速度足够快，在代码运行之前就准备好了。）请尝试类似于Paul Irish的“图像加载”插件的方法，如中所述启动，而不是

ready

。这同样有效，但我认为@derek_duncan可以回答它更简单的解决方案。这样使用它有什么好处？你不必等待window.onload，只需确保每个图像都已完全加载。好的，我认为这是一种更好的方法。谢谢