CODEWITHSUNDEEP
javascriptnullundefined
Jackyon
Jackyon

Reputation: 53

Javascript Error: "null or not an object"

I have a strange problem here: http://jackyon.com.s146246.gridserver.com/thehappymonk/

I'm using the queryloader2 plugin and maximage2 plugin. It works fine on all modern browsers, but is showing the javascript error on IE8 or below. Even IE9 shows an error, but it still can normally run.

js error: 'a.Slide[...].content.length' is null or not an object.

When removing either plugin, the page runs without error.

million thanks guys! This problem already drive me crazy few days. Please help me! Thanks!!

Upvotes: 2

Views: 3973

Answers (1)

RobG
RobG

Reputation: 147523

The error seems to be coming from jquery.maximage.min.js, the full version is here: https://github.com/akv2/MaxImage/blob/master/lib/js/jquery.maximage.js

One clue for what to look for is that there is a "use strict" directive, which is not a good idea for code intended to run in browsers that don't support strict mode. There doesn't seem to be any good reason to use it. I guess it's just hip.

There is some browser sniffing based on the UA string (not a good sign):

if($.browser.msie){
  // Stop IE from continually trying to preload images that we already removed
  document.execCommand("Stop", false);
}

Anyhow, the error seems to be related to code around line 226:

for(var j in $.Slides) {

  // Determine content (if container or image)
  if($.Slides[j].content.length == 0){
    c = '<img src="' + $.Slides[j].url + '" />';

  } else {
    c = $.Slides[j].content;
  }
  ...
}

So looking for where Slides[j].content is assigned a value, on line 625 there is:

  $.Slides = Utils.construct_slide_object();

and construct_slide_object is:

construct_slide_object: function() {
  var obj = new Object(),
      arr = new Array(),
      temp = '';

  $self.children().each(function(i) {
    var $img = $(this).is('img') ? $(this).clone() : $(this).find('img').first().clone();

Is that just a long way of writing $('<img />')?

    // reset obj
    obj = {};

So why initialise it as an object outside the each function?

    // set attributes to obj
    obj.url = $img.attr('src');
    obj.title = $img.attr('title') != undefined ? $img.attr('title') : '';

That's just a long way to write:

    obj.title = $img.attr('title');

since attr will always return a string, and $img.attr('title') != undefined is only true if it returned an empty string.

    obj.alt = $img.attr('alt') != undefined ? $img.attr('alt') : '';
    obj.theclass = $img.attr('class') != undefined ? $img.attr('class') : '';
    obj.styles = $img.attr('style') != undefined ? $img.attr('style') : '';
    obj.orig = $img.clone();
    obj.datahref = $img.attr('data-href') != undefined ? $img.attr('data-href') : '';
    obj.content = "";

    // Setup content for within container
    if ($(this).find('img').length > 0) {

That's the third time that's been used in this short bit of code.

      if($.BrowserTests.cssBackgroundSize) {
        $(this).find('img').first().remove();

And a fourth, $(this) is used 7 times.

      }
        obj.content = $(this).html();
      }

      // Stop loading image so we can load them sequentiallyelse{
      $img[0].src = "";

      // Remove original object (only on nonIE. IE hangs if you remove an image during load)
      if ($.BrowserTests.cssBackgroundSize) {

That seems to be some kind of browser inference: if the backgrounsize test returns false, it must be IE.

        $(this).remove();
      }

      // attach obj to arr
      arr.push(obj);
  });

  if(config.debug) { 
    debug(' - Slide Object - ');
    debug(arr);
  }
  return arr;
},

Fill yer boots. :-)

Upvotes: 1

Related Questions