1. дома
  2. Вопрос и ответ
  3. Есть ли способ назначить несколько источников изображения в HTML/JavaScript?

Есть ли способ назначить несколько источников изображения в HTML/JavaScript?

2009-10-27 4 views
2

Есть ли способ сообщить браузеру просмотреть список URL-адресов изображений, пока он не найдет тот, который работает? Чистый HTML будет предпочтительнее, но я предполагаю, что JavaScript, вероятно, необходим здесь (я уже использую JQuery, так что это не проблема).Есть ли способ назначить несколько источников изображения в HTML/JavaScript?

EDIT: Спасибо за ваши ответы! Я добавлю несколько пояснений:

  1. Под «works» Я имею в виду, что изображение может быть отображено.
  2. Я специально хочу сделать это на стороне клиента.

источник

2009-10-27 Imagist

+1

Определить «работы». – anddoutoi

+0

Нет, но да, возможно, решение JavaScript/JQuery, решение на стороне сервера - это еще один вариант. – rohancragg

+0

Я думаю, что эта ссылка может помочь вашей проблеме http://stackoverflow.com/a/9891041/2301588 – Sky

ответ

2

Это кажется плохой идеей для меня. Какова цель этой функции? Похоже, вы хотите что-то эквивалентное этому:

<img src="/images/file1.jpg" src2="/images/file2.jpg" src3="/images/file3.jpg">

Где браузер будет пытаться каждый файл подряд. Проблема с этим подходом заключается в том, что он значительно увеличивает требуемый трафик http и латентность. Лучшим подходом является динамическое построение страницы с использованием правильных тегов изображений загодя. Используя подход на стороне сервера, вы можете попытаться загрузить изображение с диска (или базы данных или везде, где есть изображения) и динамически включить лучший URL-адрес в тег изображения страницы.

Если вы настаиваете на делать это на стороне клиента, вы можете попытаться загрузить несколько тегов изображения:

<img src="file1.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file2.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file3.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file4.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file5.jpg" alt="" onerror="this.style.display='none'"> 
<img src="file6.jpg" alt="" onerror="this.style.display='none'">

Это приведет к странице, которая, как представляется, имеют много изображений, но они исчезают при загрузке страницы. alt="" требуется для того, чтобы Opera не отображала место для сломанного изображения; onerror требуется для Chrome и IE.

Если это недостаточно, и если все ваши изображения имеют одинаковый размер и этот размер известен, вы можете складывать кучу изображений один поверх другого, так что первое загружаемое изображение скрывает все другие. Это работало для меня в Opera, FF и IE8. Он загружает последнее изображение в список, который существует. Обратите внимание, что это уменьшает пропускную способность и память, потому что загружается каждое изображение.

<div style="width: 50px; height:38px; background-image: url(file1.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file2.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file3.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file4.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file5.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file6.jpg);"> 
<div style="width: 50px; height:38px; background-image: url(file7.jpg);"> 
</div></div></div></div></div></div>

Наконец, есть подход JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title></title> 
    <script type="text/javascript"> 
     var image_array = ['file1.jpg', 'file2.jpg', 'file3.jpg', 'file4.jpg', 'file5.jpg','file6.jpg' ]; 
     function load_img(imgId, image, images, index) { 
     image.onerror = function() { 
      load_img(imgId, this, images, index+1); 
     }; 
     image.onload = function() { 
      var element = document.getElementById(imgId); 
      if (element) { 
      element.src = this.src; 
      element.style.display = 'block'; 
      } 
     }; 
     image.src = images[index]; 
     } 
    </script> 
    </head> 
    <body> 
    <img id="id_1" alt="" style="display: none;"> 
    </body> 
    <script> 
     load_img('id_1', new Image(), image_array, 0); 
    </script> 
</html>

источник

2009-10-27 13:39:14

+0

Решение javascript приводит к бесконечному циклу, если ни одно из изображений не существует. Вам нужно добавить return 'if (index> = images.length),' как первую строку функции 'load_img (..)'. – Matt

0

Вы можете ввести URL-адрес некоторого серверного приложения/скрипта, который служит для изображения с любого источника изображения, который он может найти.

Вы можете сделать это в ASP.Net с помощью HTTPHandler, который отправляет ответ типа content = image/jpg.

Кроме ASP.Net есть amny другие варианты на стороне сервера, таких как Perl, PHP ...

источник

2009-10-27 12:28:53 rohancragg

1

Предполагая, что вы имеете в виду браузер в состоянии получить некоторый контент с кодом ответа 200 HTTP для конкретного URL , тогда ответ будет: НЕТ с клиентской стороны, используя только HTML.

Другими словами, вы не можете иметь элемент (например, img) и указать несколько URL-адресов для «try».

Конечно, вы можете создавать что-то на стороне сервера: запрос поступает для ресурса X, а на сервере есть список URL-адресов, которые «работают».

источник

2009-10-27 12:29:10 jldupont

1

INAJNBAM (я не Javascript ниндзя любыми средствами), но в псевдокоде, может быть, попробовать что-то вроде этого после загрузки страницы: (OR, теперь, когда я думаю об этом, это будет хорошо работать с PHP тоже)

$images = array('img1.jpg', 'img2.jpg', 'img3.png'....) 
    foreach $images as $img 
     {if $img.height > 0px 
      {print "<img src="$img" />" 
      end} 
     };;;;

на самом деле PHP будет даже лучше, потому что я полагаю, в JS это приведет изображения мигает на экране в конце PageLoad. Попробуйте в PHP и посмотрите, подходит ли что-то подобное вашему счету.

ПРИМЕЧАНИЕ: Я добавил 4 полуколона в конце. Я знаю, что Javascript всегда хочет их, я просто не знал, где их придерживать.

источник

2009-10-27 12:32:51

3

Если я правильно читаю спецификацию, вы должны сделать это с помощью HTML object element. <object> теги могут быть вложенными и тем самым обеспечивать цепочку ресурсов, которые будут проверяться каждый в свою очередь, чтобы быть рендерными, а при сбое пользовательский агент продолжает следующую.

Обратите внимание, что это поведение было/было ошибкой для нескольких браузеров и версий.

источник

2009-10-27 12:35:05 Joey

+0

Да, к сожалению, до сих пор не очень пригодные для использования благодаря плохой поддержке в текущих версиях IE. +1 по тому, как это было * предполагается *, чтобы быть сделанным, хотя. – bobince

+0

В соответствии с http://msdn.microsoft.com/en-us/library/cc304133%28VS.85%29.aspx он работает как с IE 7, хотя тогда DOM был неисправен. MS утверждает, что она полностью поддерживается в IE 8, включая доступность DOM для изолированных вложенных объектов. – Joey

1

Если вы говорите «работает», вы имеете в виду, что изображение может быть загружено, вы можете использовать функцию «загрузить» на изображении (в вашем случае кучу изображений) jQuery и внутри него объявить функциональность, которая будет когда загрузка изображения завершена.

Если вы говорите «работает», вы имеете в виду, что код состояния HTTP в порядке, а затем используйте вызов ajax с помощью jquery.

function getUrlStatus(url) { 
    $.ajax({ 
     url: url, 
     complete: function(xhr) { 
      return xhr.status; 
     } 
    }); 
}

источник

2009-10-27 12:39:56 StarScream

1

Если вы пытаетесь установки нескольких источников в теге изображения в зависимости от разрешения, srcset является paramenter вы ищете.

<img src="images/space-needle.jpg" 
srcset="images/space-needle.jpg 1x, images/space-needle-2x.jpg 2x, 
images/space-needle-hd.jpg 3x">

источник

2017-04-29 08:49:32 sekmo

Смежные вопросы

 Смежные вопросы