Image Crawler disappears on IE once rendering is complete

[yamagata]

1) Script Title:
Text and Image Crawler

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...wler/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]

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]

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]

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]

see attached

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

[yamagata]

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]

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]

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]

yeah, that single line of code on the .js file was enough to fix it, thank you!