当IE≤8时，Nivo-Slider消失而滑动改变 [英] Nivo-Slider disappears while slide is being changed in IE ≤ 8

问题描述

我正在测试滑块，它适用于Chrome和IE 9+，但在早期版本中无法正常工作。

我遇到的问题是当上一张幻灯片卷起时，显示一个类似错误的图像（并且然后可以看到loading.gif），并保持两秒以上，直到下一张幻灯片出现。

我尝试更改动画类型，但问题仍然存在。

我应用了 answer）？

更新2

启用JS调试后，我看到nivo slider js文件中有一个调试器中断。

JS中的行是：

  u.attr（src，i.currentImage.attr（src））show 
  

我不确定它是相关的，但我认为这可能有帮助。

解决方案

在页面的源代码中，我看到：

 < img name =ImageFileNamesrc =https://levelblob.blob.core.windows.net/levelblob/images/slides/b0624213-f3cd-4e0f-b1ae-e5e97429b087.jpgtitle = >< / img> 
  

这是无效的img标签作为W3C指定：

标记为空，表示它只包含属性，
，没有结束标记。

BTW，标准需要 alt 属性，但是没有浏览器会报错。

所以在你的case，你应该重写所有的img标签如下： {no'/'在img标签的结尾，当然没有'结束标签}

 < img name =ImageFileNamesrc =...title =alt => 
  

来自W3C的加注意提示：

< >

提示：一个好的做法是为图像指定高度和宽度
属性。如果设置了这些属性，则在加载页面时保留图像所需的空间
。然而，
没有这些属性，浏览器不知道
图像的大小。效果是在
加载期间（加载图片时）页面布局会改变。

不确定您的问题来自这里的东西，但我确定无效的html可以导致一些问题。

UPDATE

更新后，我看到你正在使用（asp）来渲染html。你应该在你的函数结束时尝试这样：

  return MvcHtmlString.Create（tag.ToString（TagRenderMode.StartTag））; 
  

PS：我无法测试任何asp代码。

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.

解决方案

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.

这篇关于当IE≤8时，Nivo-Slider消失而滑动改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！