javascript - Nivo-Slider disappears while slide is being changed in IE ≤ 8

Question

I'm testing the slider and it works in Chrome and IE 9+ but doesn't work properly in earlier versions.

The problem that occurs to me is that while the previous slide is rolled up, an error-like image is revealed (and the loading.gif is then visible) and remains for over two seconds, until the next slide appears.
I tried changing the animation type but the problem persists.

I applied this answer and it didn't solve the issue.

Any clue?

I've posted same question at dev7studios as well, no answer however.

Update This is the method that generates the images:

private static MvcHtmlString BuildImageTag(string blobName, object htmlAttributes = null, string name = null)
{
  TagBuilder tag = new TagBuilder("img");

  var src = BlobHelper.GetBlobUri(blobName);

  tag.Attributes.Add("src", src.ToString());
  tag.Attributes.Add("name", name);
  if (htmlAttributes != null)
    tag.MergeAttributes(new RouteValueDictionary(htmlAttributes), true);

  return MvcHtmlString.Create(tag.ToString(TagRenderMode.Normal));
}

How do I change it so that the closing tag is separate (as explain in this answer)?

Update 2

After enabling JS debugging, I see there is a debugger break at the nivo slider js file.

The line in the JS is:

u.attr("src",i.currentImage.attr("src")).show();

I'm not even sure it's related but I thought it might help.

Answer 1

In the source code of your page, i see:

<img name="ImageFileName" src="https://levelblob.blob.core.windows.net/levelblob/images/slides/b0624213-f3cd-4e0f-b1ae-e5e97429b087.jpg" title=""></img>

This is not valid img tag as W3C specify:

The tag is empty, which means that it contains attributes only, and has no closing tag.

BTW, an alt attribute is required by standard, however, no browsers will complain about that.

So in your case, you should rewrite all your img tags as follow: {no '/' at end of img tag and of course no '' closing tag}

 <img name="ImageFileName" src="..." title="" alt="">

Plus note tip still from W3C:

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

Not sure your problem come from something here, but i'm sure that non-valid html can lead in some problems.

UPDATE

Following your update, i see you are using (asp) to render html. You should try this at end of your function:

return MvcHtmlString.Create(tag.ToString(TagRenderMode.StartTag));

PS: i cannot test any asp code.