Изменить порядок загрузки изображений уже на странице - PullRequest
Новая
       6

Изменить порядок загрузки изображений уже на странице

1 голос
/ 26 октября 2011

Есть ли способ без AJAX изменить порядок загрузки изображений на странице?Или даже способ полностью остановить или приостановить загрузку уже имеющихся изображений?

Вариант использования прост - у меня длинный список изображений на странице, и посетители будут приземляться в разных местах на странице, используяЯкоря URL (/ images # middle-of-page), которые ссылаются на фактические контейнеры для этих изображений.

Я бы хотел в первую очередь загрузить изображения внутри запрошенного контейнера, а затем продолжить загрузку остальныхthe images.

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

Я пытался получить содержимое контейнера img при загрузке.затем с использованием новой технологии Javascript Image (), но это не меняет того факта, что это изображение на странице будет по-прежнему ожидать загрузки всех предыдущих изображений.

Я также попытался сразу же добавить предварениеdiv в теле с фоновым изображением (CSS) указанного пути img, но это также не определяет приоритет загрузки изображения.

Любой другойидеи?

Ответы [ 2 ]

2 голосов
/ 26 октября 2011

Вам необходимо иметь DOM с пустыми местозаполнителями img, т.е. 

<img src="" mysrc="[real image url here]" />

Или вы можете сделать изображения для отображения изображения «Загрузка ...» по умолчанию.Вы даже можете кэшировать реальный URL изображения в каком-то пользовательском теге, например, mysrc.Затем, когда вы знаете, какие именно изображения вы хотите показать (и в каком порядке), вам нужно построить последовательность загрузки изображений 

var images = [];//array of images to show from start and in proper order
function step(i){
  var img = images[i++];
  img.onload = function(){
    step(i);
  }
  img.src = "[some url here]"
}

Надеюсь, это поможет.

0 голосов
/ 07 ноября 2011

Для интереса, это функция, которую я в итоге реализовал на основе ответов здесь (я сделал ее функцией загрузки по требованию для оптимальной скорости): 

function loadImage(img) { // NEED ALTERNATE METHOD FOR USERS w/o JAVASCRIPT! Otherwise, they won't see any images.

      //var img = new Image(); // Use only if constructing new <img> element

        var src = img.attr('alt'); // Find stored img path in 'alt' element

        if(src != 'loaded') {

          img

            .load(function() {
              $(this).css('visibility','visible').hide().fadeIn(200); // Hide image until loaded, then fade in
              $(this).parents('div:first').css('background','none'); // Remove background ajax spinner
              $(this).attr('alt', 'loaded'); // Skip this function next time
              // alert('Done loading!');
            })

            .error(function() {
              alert("Couldn't load image! Please contact an administrator.");
              $(this).parents('div:first').find("a").prepend("<p>We couldn't find the image, but you can try clicking here to view the image(s).</p>");
              $(this).parents('div:first').css('background','none');
            })

            .attr('src', src);
        }
    }
...