PDA

View Full Version : Image Crawler disappears on IE once rendering is complete



yamagata
10-06-2010, 11:27 AM
1) Script Title:
Text and Image Crawler

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

3) Describe problem: Well, basically the title says it all. I'm a total newbie using this controls. I have an image crawler that works perfectly on mozilla firefox. Howerver, on IE, once the page has completed the rendering process, the imagacrawler disappears. Im kinda lost, everything seems to be fine. I've placed the script at the botton right before the body tag closes, as i read on previous post. Any ideas?

Thanks in advance:)

yamagata
10-07-2010, 11:52 AM
Ok, seems like i found out the reason why my crawler disappears. If the imageUrls i want to show are all correct, there is no problem, both IE and mozilla work fine. But, if a single imageUrl is broken/mispelled, mozilla handles it normally, simply rendering a blank misisng image. But it makes IE crash. Isnt there a way to avoid this?. I mean, it makes the crawler kinda useless, since its pretty likely that, at some point, some imageurl could be broken...:(

vwphillips
10-07-2010, 12:38 PM
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse == 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
for (var z0=0;z0<ims.length;z0++){
if (ims[z0].width<40){
ims[z0].parentNode.removeChild(ims[z0]);
}
}
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete == 'boolean' && ims[i].complete){
ic++;
}
else {
ims[i].onload = function(){
if(++ic == ims.length)
cObj.setup();
};
}
if(ic == ims.length)
this.setup();
}
}
else {
this.setup();
}
}

yamagata
10-07-2010, 01:52 PM
Thanks for the help, but i just tried to add that chunk of js code on the crawler.js file, and nothing changes, same old...:(

vwphillips
10-07-2010, 02:07 PM
see attached

you may need to preload your images with this and the original script

yamagata
10-07-2010, 02:17 PM
Yeah, i already saw that crawler example in the web. Problem is, i cant preload the images since the content is expected to be fully dynamic...

vwphillips
10-08-2010, 11:01 AM
suggest you use a timeout to give time for the images to load



setTimeout(function(){
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '600px',
'height': '180px'
},
inc: 7, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true
}); },5000);

jscheuer1
10-08-2010, 02:38 PM
Script's author weighing in here. I believe that using a timeout like that is guessing at how long it will take an image to load. It may work for some browsers/bandwidths/number of images, may not for others. I'd try reverting to the original script and simply changing:


else {
ims[i].onload = function(){
if(++ic == ims.length)
cObj.setup();
};
}

to:


else {
ims[i].onload = ims[i].onerror = function(){
if(++ic == ims.length)
cObj.setup();
};
}

Note: Untested, but should work. You will get broken image icons in IE for the missing images though. Because of that it would probably be best to specify width and height for the images either via attribute or style.

yamagata
10-14-2010, 11:42 AM
yeah, that single line of code on the .js file was enough to fix it, thank you! :)