Reputation: 53
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
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