2

i've been a long time stackoverflow lurker and have almost always found the answer to my problem on the boards (thank you for that) but this one is stumping me ...

i'm building a portfolio site .. it uses jQuery to position elements (images) being pulled from a MySQL database .. pretty straight forward ... but for some reason the images don't always load or will load a couple and then permanently hang up and not do anything ...

the page is here ... http://www.spacecar.org/2013/

the JS file that does all the work is here http://www.spacecar.org/scripts/jquery.menu.js

is there something really basic i'm just not seeing ? any insight would be hugely appreciated ... i know i'm making alot of calls to enact the effect-functionality of the site but ... argh!

thanks

drasticdub
  • 51
  • 1
  • 2
  • 1
    Think it has something to do with your jquery image loader, something name krioImageLoader – Pitchinnate Apr 26 '13 at 19:12
  • thanks for the reply! i tried removing it but it unfortunately had no effect on the page. the images still aren't loading ... – drasticdub Apr 26 '13 at 19:23
  • Are you getting the little loading spinner or a broken image? – Pitchinnate Apr 26 '13 at 19:38
  • so for me .. the page loads, then the spinners show up (sometimes) and then maybe some of the images will load but not all of them and then it just sits ... if you go to 'view source' all the HTML is loaded properly .. it's just not displaying on the screen ... this is driving me nuts! – drasticdub Apr 26 '13 at 20:05
  • right it is the jquery that is detecting whether the images load or not. it looks like after it detects the images are loaded it hides the loading spinners. Did your write the jquery or is it a package you found online? – Pitchinnate Apr 26 '13 at 20:15
  • it's all my own code ... i thought i was being really clever with this sorta menu-idea but maybe i'm biting off more than i can chew ... so right, basically it just loads the spinners as the background then loads the image in ... all the spinners go away after you click any of the images on the screen .. but you shouldn't be able to see them at that point because the images should already be loaded on top ... hope that makes sense ... still though, don't know why it won't display the image !! – drasticdub Apr 27 '13 at 03:41

1 Answers1

0

$( 'img' ).load( function(){ ... }); – is not the thing you can trust (in your plugin I see this code). Here you can see why: http://api.jquery.com/load-event/ (start reading from the caveats word)

Here is little example to describe the trouble:

$( document ).ready( function(){
    $( 'img' ).load( function(){
       // this event going to fire only if document was ready after image was loaded; (very seldom, almost never)
       console.log( 'Fired?! You are lucky today!' );
    });

    $( document.body ).append( '<img src="http://stat19.privet.ru/lr/0b164d8151948d2fdedfbfdc420f5392?temp=2" id="some"/>' );
    $( '#some' ).load( function(){
        // this event will fire often, except of cases descripted in `load` event manual
        console.log( 'Huugh. Today have fired. But I don\'t know about tomorrow' );  
    });

  var temp = new Image;
  temp.src = 'http://photo.a42.ru/photos/92772/medium/11757.jpg';
  temp.onload = function(){
      // this event going to fire almost always except of cache issue with IE, that can be handled by skipping cache with `?nothing=random` appending to image URL
    console.log( 'Okay, okay! I\'ve fired' );
  }
  $( document.body ).append( temp );
});

You can run it here: http://jsfiddle.net/p6Cpy/

zelibobla
  • 1,498
  • 1
  • 16
  • 23
  • thank you all for helping me figure this out ... it was indeed the image loader ... this solution here .. http://stackoverflow.com/a/8546076/2321573 .. seems to have fixed everything ... – drasticdub Apr 30 '13 at 21:35