图片未加载到网站上答案

【问题标题】：Images not loading on website图片未加载到网站上
【发布时间】：2013-05-13 13:25:03
【问题描述】：

我遇到的问题是，当页面加载时，有时会显示所有图像，有时只显示 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)
    });

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

我正在使用画布功能添加具有乘法效果的三角形（如 Photoshop）。

【问题讨论】：

很遗憾，我没有给您答案，但您是否尝试过监控您的网站流量以查看图像是否被调用？在 Firebug 中，“NET”选项卡将向您显示页面加载时的所有流量 - 您将能够查看图像是否正在被调用，或者正在加载（或失败），或者正在被调用并成功加载，其中万一这是您显示它的方式中的某个错误。
我刚刚注意到，当我在没有缓存的情况下刷新页面 (ctrl+f5) 时，图像不显示。但这已成功下载（在萤火虫中检查）。当您仅刷新页面并允许浏览器仅缓存（仅 F5）时，图像是可见的。也许它会帮助你
您确定不应该等到图像加载完毕，即以某种方式使用图像的 onload 事件，然后再开始使用它们？
加载图像需要一些时间，这就是为什么当您重新加载页面（缓存版本）时它们会正确显示的原因。
你什么时候开始这个过程？我的猜测是在你开始画布代码之前图像没有完全加载（它在图像从第一次被缓存时起作用，因为 then 它们加载速度足够快以至于它们'在您的代码运行之前准备好。）尝试像 this question 中提到的 Paul Irish 的“加载图像”插件，而不是 ready。

标签： javascript jquery css canvas image-manipulation

【解决方案1】：

确保图片已加载：

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

【讨论】：

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

【解决方案2】：

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

就像我说的，要让您的页面正常工作，请确保所有内容都已加载，然后运行您的脚本。

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

【讨论】：