Question

所以这就是问题，

我正在尝试使用jQuery加载图像以加快页面下载速度。为了实现它，我将以下代码作为图像，我想在页面加载后加载。

<img src="/pixel.png" new-img="/newimage.png"/>

然后，要在文档完全加载后加载最终图像，我使用了以下内容。

$(document).ready(function(){ 
    $("img").attr("src", $("img").attr("new-img"));
});

这适用于单个图像，但我有多个图像要转换为此图像。当我尝试加载这样的多个图像时，我完全难以接受，它将所有图像设置为最后加载的图像。

我不确定，但是'$（this）'与它有什么关系吗？

的jsfiddle： http://jsfiddle.net/AeroMcDoom/8sxED/

Answer 1

使用：

$("img").attr("src", function(){return $(this).attr("new-img")});

仅供参考，您应该使用data- *属性：

<img src="/pixel.png" data-img="/newimage.png"/>

然后：

 $("img").attr("src", function(){return $(this).data("img")});

Answer 2

试试这个：

$("img").each(function(){$(this).attr("src", $(this).attr("new-img"))});

匹配多个元素的选择器上的

.attr将无法正常工作。 .attr()会将找到的所有图片的属性设置为已定义的内容。此外，您无法使用$("img").attr("new-img")进行设置，因为.attr(）始终只返回它从选择器中找到的第一个值。

Answer 3

$(document).ready(function(){ 
    $("img").each(function(){
      $(this).attr('src',$(this).attr("new-img"));
    });
});

Answer 4

稍微减少开销：

$(function(){ 
    $("img").each(function(){
        this.src = this.getAttribute('data-newimg');
    });
});

除非你需要在IE6上工作，否则没有必要为每个图像初始化一次或两次jQuery。

Answer 5

我认为你可以通过这样做来保存额外的HTTP请求：

<div class="lazy">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA ///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    data-src="/newimage.png"
    alt="Good to go" />
</div>

和JS：

$(window).on('load', function() {

   $(".lazy > img").each(function(){
      var src = $(this).attr('data-src');

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

在jQuery中加载图像

5 个答案: