为什么 jQuery 可以在服务器上计算宽度，但在本地运行时不能？答案

【问题标题】：Why can jQuery calculate width on a server, but not when running locally?为什么 jQuery 可以在服务器上计算宽度，但在本地运行时不能？
【发布时间】：2014-01-19 02:12:09
【问题描述】：

我正在构建一个在服务器上运行良好的 jQuery 插件。但是，如果我尝试在本地使用它，它会失败，因为宽度和高度返回零。违规代码是：

$("#off-screen").load(function() {
    var naturalWidth = this.width;   
    var naturalHeight = this.height;
});

...它应该获取动态加载的、具有离屏 ID 的视口外图像的宽度和高度。我正在使用 this.width 而不是 width();因为我在某处读到它可能对缓存图像有所帮助，但两种方法都不能在本地工作。

在服务器上：http://kthornbloom.com/smoothzoom/

本地（从 Github 下载，您将看到图像无法在 Chrome 中正确缩放）：https://github.com/kthornbloom/Smoothzoom

为什么相同的代码可以在服务器上运行，但在本地却不行？

【问题讨论】：

你是在 chrome 中运行这个吗？在没有服务器的情况下，您无法在 Chrome 中执行 AJAX 请求。
您是否正在加载所有必要的文件或脚本？
@Mathletics 是的，你可以。您的意思是 CORS 调用，默认情况下在所有浏览器中都被禁止。
您确定正在调用加载函数吗？此外，您的 naturalWidth 和 naturalHeight 变量是匿名函数的本地变量，它们在该块之外不可用。
@OP：你检查过你的图片是否真的被加载了吗？我坚信你违反了同源政策。作为测试，您可以使用命令行参数 --disable-web-security 运行 chrome，或在 Firefox/IE 中禁用此设置并打开本地文件。

标签： javascript jquery html css width

【解决方案1】：

除了将load 处理程序设置为不执行任何操作的匿名函数外，您还应该将依赖于正在加载的图像的代码放入处理程序中。

这适用于我的机器：

$("#off-screen").load(function() {                       

    $('#lightwrap img').css({
        width: width,
        height: height,
        top: (offset.top - amountScrolled),
        left: offset.left
    });

    imageSizer();

    $('#lightbg').fadeIn();

    event.preventDefault(); 

});

【讨论】：

完美运行，完全有意义