Javascript 在jQuery中加载图像

问题是

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

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

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

我不确定，但是“$（这个）”和它有什么关系吗

JSFiddle：

使用：

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

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

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

试试这个：

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

---

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

.attr

将无法正常工作

.attr（）

将其找到的所有图像的属性设置为定义的内容。您也不能使用

$（“img”）.attr（“新img”）

设置它，因为

.attr（

）总是只返回它从选择器中找到的第一个值。

，开销稍微小一些：

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

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

---

没有必要为每个映像初始化jQuery一到两次，除非您需要在IE6上使用它。

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

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

---

你确定不是吗？谢谢你的澄清+什么？可以将函数用作attr（）中的第二个参数？游戏规则改变者@CerylWiltink Ya，检查文档：

.attr（attributeName，function（index，attr））

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

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

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

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

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