Question

我测试了它，它适用于opera，safair，IE和firefox。我已经阅读了几个解释问题的其他stackoverflow帖子和Web条目，最常见的答案是将它放在实时服务器上，因为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

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

Answer 2

基本上，jQuery知道它并不适用于所有浏览器，并且不支持它：

说load-event docs：

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

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行＆gt;函数。应该注意有几个已知的警告。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，则无法在WebKit中正确触发

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

Answer 3

你错过了一个右大括号而你没有指定一个网址

$("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

你在这里调用的.load（）是“绑定到load事件”，而不是ajax。 load-event vs 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 6

$.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 7

我们提出的解决方案涉及使用jQuery（）。load（）函数的简单JavaScript。

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

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

2）在您的母版页中包含所有内容js文件。 [例如：<script src="content1.js"></script>] ......

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

作者：mah3＆amp; wichu1

jQuery .load（）在Chrome浏览器中无法正常运行

7 个答案: