jQuery's .load() not working properly in Chrome browser

I've tested it and it works in opera, safair, IE, and firefox. I've read several other stackoverflow posts and web entries explaining the problem and the most common answer has been to put it on a live server as chrome doesn't accept ajax functions locally. So I uploaded my code onto my godaddy server and it's still not working, or am I mis-understanding what a 'server' is? I thought servers simply meant upload it to开发者_如何转开发 my paid web hosting account.

The second most common answer I found was to launch Chrome from Terminal with "--allow-file-access-from-files" argument. How exactly do I go about doing this, and this is a working solution when I'm trying to make an application that other chrome users can access while visiting my website?

The relevant snippet of code that I am using is as follows, if it's relevant to this question: (basically, the height returns as 0 because the image has not loaded. This problem does not occur in any of the other browsers and I have tested this on my live website as well)

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

Basically, jQuery knows it doesn't work in all browsers and doesn't really support it:

Said By load-event docs:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a >function when an image (or collection of images) have completely loaded. There are several >known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache

.load doesnt work on images. CHeck out this plugin - https://gist.github.com/268257

you're missing a closing brace and you're not specifying a url

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

Maybe the event has already fired when you try to bind it?

Try this:

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

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

$.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);
});

The .load() you're calling here is "bind to the load event" one, not the ajax one. load-event vs load-data

Edit to answer your comment. Here's what I would do.

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

});

Then handle the click event - by calling the html function, the load event will fire because of your previous binding.

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

});

Solution we came up with involves using plain JavaScript insted of jQuery().load() function.

Assuming You have a target element to which You want to insert Your HTML content from other HTML files You can use this solution:

1) For each HTML page create separate JS file and inside of it insert just simple string variable with all Your contant as its value. [ example: content1.html -> contant1.js ]... { var myContent1 = 'Hello, World!' }

2) In Your master page include all content js files. [ example: <script src="content1.js"></script> ]...

3) To insert Your content to a master page use simple DOM property like innerHTML: [ example: onClick = document.getElementById('target_Element').innerHTML = myContent1; ]

Authors: mah3 & wichu1