加载 html，然后在 Jquery 中使用 Ajax 加载图像

Question

基本上我在这里寻找的是性能。

$.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 来延迟加载附加到某些内容的图像。现在我可以看出，有和没有该代码的延迟加载行的加载时间完全相同（它加载了大约 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);

加载时间仍然相同...

感谢您的帮助！

Answer 1

有没有办法把html放进去 页面，停止浏览器 加载该html中的图像，以及 然后在用户滚动时加载它们？

是的，是：jQuery 航点： 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');
    }
})

Answer 2

如果你已经知道要在页面上加载哪些图片，你可以在页面加载时为图片赋予空的 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';
}