Nivo-Slider исчезает при смене слайда в IE ≤ 8

Я тестирую слайдер, и он работает в Chrome и IE 9+, но не работает должным образом в более ранних версиях.

Проблема, с которой я столкнулся, заключается в том, что при сворачивании предыдущего слайда появляется ошибочное изображение (и затем отображается загрузка.gif), которое остается более двух секунд, пока не появится следующий слайд.
I попытался изменить тип анимации, но проблема не устранена.

Я применил этот ответ, и он не решил проблему.

Любая подсказка?

Я также отправил тот же вопрос на dev7studios, однако ответа нет.

введите здесь описание изображения

Обновить Это метод, который генерирует изображения:

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));
}

Как изменить его, чтобы закрывающий тег был отдельным (как объясняется в этом ответе)?

Обновление 2

После включения отладки JS я вижу, что в js-файле слайдера nivo есть разрыв отладчика.

введите здесь описание изображения

Строка в JS:

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

Я даже не уверен, что это связано, но я подумал, что это может помочь.


person Shimmy Weitzhandler    schedule 01.03.2013    source источник


Ответы (2)


В исходном коде вашей страницы я вижу:

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

Это недопустимый тег img, поскольку W3C указывает:

Тег пустой, что означает, что он содержит только атрибуты и не имеет закрывающего тега.

Кстати, атрибут alt требуется по стандарту, однако ни один браузер не будет жаловаться на это.

Таким образом, в вашем случае вы должны переписать все свои теги img следующим образом: {без '/' в конце тега img и, конечно же, без закрывающего тега ''.

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

Плюс совет еще от W3C:

Совет. Рекомендуется указывать атрибуты высоты и ширины изображения. Если эти атрибуты установлены, место, необходимое для изображения, резервируется при загрузке страницы. Однако без этих атрибутов браузер не знает размер изображения. Эффект будет заключаться в том, что макет страницы изменится во время загрузки (пока загружаются изображения).

Не уверен, что ваша проблема связана с чем-то здесь, но я уверен, что недействительный html может привести к некоторым проблемам.

ОБНОВЛЕНИЕ

После вашего обновления я вижу, что вы используете (asp) для рендеринга html. Вы должны попробовать это в конце вашей функции:

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

PS: я не могу проверить код asp.

person A. Wolff    schedule 16.04.2013
comment
Я обновляю ответ, я думаю, вам следует попробовать использовать TagRenderMode.StartTag, а не TagRenderMode.SelfClosing. Но я боюсь, я не могу проверить код asp. msdn.microsoft.com /en-us/библиотека/ - person A. Wolff; 16.04.2013
comment
Я уже изменил его, да, это он, я сейчас тестирую его, и надеюсь, что вы скоро получите 215 новых повторений! - person Shimmy Weitzhandler; 16.04.2013
comment
Вы редактируете мой ответ с помощью EndTag. Вы уверены, что это не StartTag? - person A. Wolff; 16.04.2013
comment
Откат. Теперь это работает в IE8, но не в IE7. Я проверяю исходный код HTML и вижу, что тег img все еще закрывается. Как я могу явно настроить TagBuilder для отображения отдельных открывающих и закрывающих тегов? - person Shimmy Weitzhandler; 16.04.2013
comment
Я только что протестировал эмулированные ie7, ie8, ie9, и теперь это работает нормально. Вы думали очистить кеш браузера? - person A. Wolff; 16.04.2013
comment
Вы можете присудить свою награду за 36 минут. Кстати, какой эмулятор вы используете? Есть ли эмулятор браузера для Google Chrome? - person Shimmy Weitzhandler; 16.04.2013
comment
Спасибо, шимми! Используя Internet Explorer и инструменты разработчика (F12), вы можете переключаться между версией IE и режимом совместимости. Это невозможно при использовании Chrome, так как Chrome — это браузер с автоматическим обновлением, что означает, что вы всегда должны иметь / использовать последнюю доступную стабильную версию. - person A. Wolff; 16.04.2013
comment
@Shimmy Спасибо, я ценю :) - person A. Wolff; 16.04.2013
comment
Ты заслуживаешь каждого, чувак, спасибо за улов, ты действительно молодец! - person Shimmy Weitzhandler; 16.04.2013

Сайт написан на HTML 5?

Недавно я реализовал это на созданном мной веб-сайте, и он отлично работает как в IE 8, так и в IE 7. Созданный мной веб-сайт был написан на HTML 5, и единственное, что я изменил, чтобы заставить слайдер работать, — это изменить теги div. вокруг ползунка к разделам, а затем добавьте ножку HTML 5, все остальное было на сайте.

Вот сайт, который я создал, и он работает, надеюсь, он поможет и вам.

(У меня нет 50 представителей, поэтому я не могу опубликовать это как комментарий)

person sam_7_h    schedule 10.03.2013
comment
:( Проблема все еще сохраняется. Я добавил html5shiv на страницу MainLayout, это должно было работать? Если вы решите эту проблему, вы получите более 50 повторений (я думаю, 65)... - person Shimmy Weitzhandler; 11.03.2013
comment
Я также изменил div, окружающие ползунок, на разделы с использованием тегов html5. - person sam_7_h; 11.03.2013