Question

我有4个div，用于从CCTV摄像机的FTP服务器源中获取放在Web服务器上的图像。

目前，我已经使用javascript每隔3秒刷新一次这些图片。

此过程的性质是某些帧不完整或有故障，因此它们会导致图像图标损坏3秒，直到下次刷新为止。

我想要做的是有一个jQuery片段，它将图像加载到内存中，检查它是我们期望的尺寸以及图像是否正确形成，然后在通过这些测试后替换相应div中的图像

我无法弄清楚如何将图像加载到内存中以执行这些检查，有人能指出我正确的方向吗？

Answer 1

您可以使用Image对象的onload事件来检查其尺寸。这是一个使用此概念的函数，应该作为解决问题的指南：

function setImageSize(image) {
    var defWidth = 240;
    var img = new Image();
    img.onload = function () {
        var width, height;
        if (img.width > img.height) {
            width = (img.width > defWidth ? defWidth : img.width);
            height = img.height * (defWidth / img.width);
        } else {
            height = (img.height > 350 ? 350 : img.height);
            width = img.width * (350 / img.height);
        }
        img.width = width;
        img.height = height;
        img.src = image.src;
    }
}

jQuery加载图像，仅在加载完成时显示

1 个答案: