网站上的图片无法加载

Question

我遇到的问题是，有时候加载页面会显示所有图片，有时只显示两张图片，有时则全部显示。我不知道为什么会这样。

有什么想法吗？

    $('#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)
    });

to_canvas函数：

    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;
    }

我正在使用canvas函数添加三角形，并使用乘法效果（类似于Photoshop）。

- user1617218

---

很遗憾我没有答案给你，但是你尝试过监控你的网站流量来查看图片是否被调用了吗？在Firebug中，“NET”选项卡会显示页面加载时所有的流量 - 你可以看到图片是否被调用、正在加载（或失败）或者被成功调用和加载，如果是后者，那么问题可能出现在你展示它的方式上。 - johnkavanagh

我刚刚注意到，当我在没有缓存的情况下刷新页面（ctrl+f5），图片不会显示。但是它们已经成功下载了（在firebug中检查过）。当你只是刷新页面并允许浏览器缓存（只按F5键），图片就可以显示了。也许这会对你有所帮助。 - Jakub Matczak

你确定在开始使用图片之前不应该等待它们加载完成，比如说利用图片的onload事件来实现？ - adeneo

你可以通过将for循环改为for (var i = 0, j = pix.length; i < j ; i += 4) {来优化你的代码。 - RST

即使每个图像只有10kb，您可能仍然会发现在它们通过网络传输之前，几行JavaScript代码已经运行了。这并不是说加载图像很慢，而是比文档准备就绪和JavaScript运行之间的时间要慢一些。 - Matt Gibson

Answer 1

确保图像已加载：

Make sure the images are loaded :

$('#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
});

- adeneo

---

这也可以工作，但我认为@derek_duncan的答案更简单。使用这种方法有什么优势？ - user1617218

你不需要等待window.onload，而是确保每个图像都已完全加载。 - adeneo

好的，我认为这是一个更好的方式。谢谢。 - user1617218

Answer 2

将所有代码包装起来，以确保在执行脚本之前加载图像。当您最初加载页面时，它会缓存图像（将它们存储在临时内存中），但在渲染所有元素之前不会缓存。当您重新加载时，它会从缓存中读取图像 - 这比再次从服务器重新获取图像要快得多 - 因此图像与其他所有内容一起加载。这会导致可见的图像。

就像我说的那样，为了使您的页面正常工作，请确保加载所有内容，然后运行您的脚本。

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

- derek_duncan