Загрузите HTML, затем загрузите изображения с помощью Ajax в Jquery - PullRequest
Новая
       1

Загрузите HTML, затем загрузите изображения с помощью Ajax в Jquery

4 голосов
/ 29 мая 2011

В основном я ищу производительность здесь.

$.post(link,     
  function(data){
         //removes the image that was displayed while loading
         $("#loadingImg").remove();

         //append the new content, into the content div
         //and add a div around the new content in order to lazy load
         $("#content").append('<div id="new-page">' + data + '</div>');
         //lazy load the images inside the new div
         $("#new-page").find("img").lazyload({ 
                 placeholder : "/images/white.png", effect : "fadeIn" });
  });

Я хочу использовать плагин jquery, lazy load , для отложенной загрузки изображений, которые добавляются к некоторому контенту.Прямо сейчас я могу сказать, что время загрузки с и без строки lazyload этого кода абсолютно одинаково (загружается около 20 изображений).Теперь я предполагаю, что строка $ ("# content"). Append () ожидает загрузки всех изображений перед добавлением.

Есть ли способ поместить html на страницу,остановить браузер от загрузки изображений в этом HTML, а затем загрузить их при прокрутке пользователя?

Кстати, даже когда я делаю: 

data = '<div id="new-page-' + pageCounter + '">' + data + '</div>';
var newData = $(data);
newData.find("img").lazyload({ placeholder : "/images/white.png", effect : "fadeIn" });
$("#content").append(newData);

Это все еще занимаетстолько же времени для загрузки ...

Спасибо за помощь!

Ответы [ 2 ]

11 голосов
/ 29 мая 2011

Есть ли способ поместить html на страницу, остановить браузер от загрузки изображений в этот html, а затем загрузить их по мере прокрутки пользователем?

Да,это: jQuery waypoints: http://imakewebthings.github.com/jquery-waypoints/

Рабочий пример:

http://jsfiddle.net/marcosfromero/BbA9M/

HTML: 

<img id="first" src="" width="364" height="126" deferred="http://www.google.com/images/logos/ps_logo2.png" />

<div style="height: 500px; ">Some vertical space. Scroll to the bottom</div>

<img id="second" src="" width="364" height="126" deferred="http://www.google.com/images/logos/ps_logo2.png" />

Единственный недостаток, который я нахожу вэтот HTML-код означает, что атрибут deferred не является стандартным.

jQuery: 

$('img').waypoint(function(event, direction) {
    // set the image src attribute from the deferred one, which has the real URL
    this.src = this.getAttribute('deferred');
}, {
    triggerOnce: true, // load the image just once
    offset: function() {
        // calculate where the event should be fired
        // in this case, when the whole image is visible
        return $.waypoints('viewportHeight') - $(this).height();
        // if you want to load the image when the top of it is visible change it for
        // return $.waypoints('viewportHeight');
    }
})
0 голосов
/ 29 мая 2011

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

<img id='image1' src='' />

пустое свойство src 

window.onload = function () {
  ... the image path list ...
var images = document.getElementsByTagName('img');

// for loop then add the appropriate images in their correct place

... images[i].src = 'correct path';
}
...