jQuery 的 .load() 在 Chrome 浏览器中无法正常工作

Question

我已经测试过它，它可以在 Opera、Safair、IE 和 Firefox 中运行。我读过其他几篇 stackoverflow 帖子和网页条目来解释这个问题，最常见的答案是将其放在实时服务器上，因为 chrome 不接受本地 ajax 函数。所以我将代码上传到我的 godaddy 服务器上，但它仍然无法工作，或者我是否误解了“服务器”是什么？我认为服务器只是将其上传到我的付费网络托管帐户。

我发现的第二个最常见的答案是使用“--allow-file-access-from-files”参数从终端启动 Chrome。当我尝试创建一个其他 Chrome 用户在访问我的网站时可以访问的应用程序时，我到底该怎么做？这是一个可行的解决方案吗？

我正在使用的相关代码片段如下，如果它与这个问题相关的话：（基本上，高度返回为0，因为图像尚未加载。这个问题不会出现在任何其他浏览器中，我已经测试过这也在我的实时网站上）

$("img").click(function() {
    $("#galleryImg").html("<img src='images/full_size/" + selectedImg + "' alt='" + selectedImg + "' />");
    $("#galleryImg img").load(function() {
        var imgHeight = $(this).height();
        alert(imgHeight);
    });
});

Answer 1

基本上，jQuery 知道它不能在所有浏览器中工作，并且并不真正支持它：

由 load- 表示事件文档：

与图像一起使用时加载事件的注意事项

开发人员尝试使用 .load() 快捷方式解决的一个常见挑战是在图像（或图像集合）完全加载时执行 > 函数。有几个已知的警告需要注意。它们是：

• 跨浏览器工作不稳定且不可靠
• 如果图像 src 设置为与之前相同的 src，则在 WebKit 中无法正确触发
• 它没有正确地冒泡 DOM 树
• 可以停止触发已存在于浏览器缓存中的图像

Answer 2

.load 不适用于图像。查看这个插件 - https://gist.github.com/268257

Answer 3

你缺少一个右大括号并且没有指定 url

$("img").click(function() {
    $("#galleryImg").html("<img src='images/full_size/" + selectedImg + "' alt='" + selectedImg + "' />");
    $("#galleryImg img").load("script.php",function() {
        var imgHeight = $(this).height();
    });
});

Answer 4

也许当您尝试绑定它时该事件已经触发？

试试这个：

$(function(){
    $("#galleryImg img").live('load', function() {
        alert($(this).height());
    });

    $("img").click(function() {
        $("#galleryImg").html("<img src='images/full_size/" + selectedImg + "' alt='" + selectedImg + "' />");
    });
});

Answer 5

$.fn.lastLoaded = function(callback){
    var i = $(this);
    if(i[0]){
        var a = i.eq(0);
        a[0].img_size = i.size();
        a[0].img_last_load = setInterval(function(){
            var img_ready = 0;
            i.each(function(){ if(this.complete) img_ready++; });
            if(img_ready == a[0].img_size){
                clearInterval( a[0].img_last_load );
                callback();
            }
        }, 50);
    }
}

var i = some_el.find('img').css('opacity', 0);

i.lastLoaded(function(){
  i.css('opacity', 1);
});

Answer 6

您在此处调用的 .load() 是“绑定到加载事件”之一，而不是 ajax 之一。 load-event 与 load-data

编辑以回答您的评论。这就是我要做的。

//page load - set your event binding here. 
$(function(){
    $("#galleryImg img").load(function() { 
            var imgHeight = $(this).height();
            alert(imgHeight);
       });

});

然后处理 click 事件 - 通过调用 html 函数，由于您之前的绑定，将触发 load 事件。

$("img").click(function() {
    $("#galleryImg").html("<img src='images/full_size/" + selectedImg + "' alt='" + selectedImg + "' />");

});

Answer 7

我们提出的解决方案涉及使用纯 JavaScript 代替 jQuery().load() 函数。

假设您有一个目标元素，您想要从其他 HTML 文件插入您的 HTML 内容，您可以使用此解决方案：

1) 为每个 HTML 页面创建单独的 JS 文件，并在其中插入简单的字符串变量，并将您的所有内容作为其 内容价值。
[ 示例：content1.html -> contant1.js]...
{ var myContent1 = 'Hello, World!' }

2) 在您的母版页中包含所有内容 js 文件。
[ 示例： ]...

3) 要将您的内容插入到母版页中，请使用简单的 DOM 属性（如innerHTML）：
[ 示例： onClick = document.getElementById('target_Element').innerHTML = myContent1; ]

作者：mah3 &威楚1