使用 data-src 而不仅仅是 src 加载图像

Question

我正在尝试使用img data-src 标签而不是img src 来加载图像。我创建了两个简单的 JSFiddle，尽管只有一个带有 img src 的作品。这些都在这里：

img data-src example 这不起作用，我想要它

img src example 这个确实有效。

有人可以填写一下为什么 img data-src 不起作用吗？我对此感到困惑，并一直在寻找答案几个小时。

Answer 1

您正在使用HTML5 data attributes，它不会替换 HTML 元素的普通 HTML 属性，例如 src。所以你的图片需要有src attribute，不管有没有data-src，都是相互独立的。

data-* 属性允许我们存储关于标准、语义 HTML 元素的额外信息 (...)

---

• 当图像出现在屏幕上时加载它：

延迟加载图像的一种常见方法是将 src 设置为一个非常小的图像，有时是1x1px gif，一旦用户滚动并且图像在屏幕上，将 src 替换为真实图像。像这样的：

<img src="fake_small_image.gif" data-src="real_image.jpg">

data-src 可以称为data-whatever_you_want。这个想法是使用 JavaScript 跟踪页面的scrollTop 位置。一旦图像将出现，您将src 值"fake_small_image.gif" 替换为data-src 值"real_image.jpg"。您在此答案的 cmets 中发布的示例忽略了无效的初始 src 的分配。

var $window = $(window),
  window_height = $window.height() - 150, // I'm using 150 (a random number) so the image appears 150px after it enters the screen, so the effect can be appreciated
  $img = $('img.some_img'),
  img_loaded = false,
  img_top = $img.offset().top;

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

  if (($window.scrollTop() + window_height) > img_top && img_loaded == false) {

    $img.attr('src', $img.attr('data-src_of_original_img'));

  }

});

#container {
  width: 100%;
  height: 200vh;
  background-color: grey;
}
.some_img {
  position: absolute;
  top: 100vh;
  width: 100%;
}
body {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src_of_original_img="https://i.imgur.com/Lcsolww.jpg" alt="" class="some_img">
</div>

---

• 加载后立即显示图片：

类似的方法是使用 JavaScript 虚拟加载图像，一旦加载，将 src 分配给图像。这样做是为了防止图像在完全加载之前显示出来。

var $img = $('img.some_img'),
  $img_created_with_js = $('<img src="' + $img.attr('data-src_of_original_img') + '">');

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

    $img.attr('src', $img.attr('data-src_of_original_img'));

  });

.some_img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src_of_original_img="https://i.imgur.com/Lcsolww.jpg" alt="" class="some_img">

---

这两种方法都可以应用于图像。例如：您可以等到用户滚动图像所在的位置然后开始加载它，但直到它完全加载后才显示。

---

资源：

• Smallest data URI image possible for a transparent image
• Image from Oskar Krawczyk

Answer 2

没有定义“src”属性的图像是错误的 HTML。您会这​​样做的唯一实例是，如果您想延迟图像加载并将其与一些脚本（或在页面上使用一个图像标签动态加载差异图像）排队。

这是一个使用数据属性和 jQuery 来加载图像的示例，而无需调用 HTML 中的src 属性。

$('img').each(function() {
	var imageDataSource = $(this).data('src').toString();
  var setImageSource = $(this).attr('src', imageDataSource);
});

 img {
  width: 250px;
  height: auto;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img data-src="https://pmcdeadline2.files.wordpress.com/2013/07/chrisw__130723232812.jpg"/>

https://jsfiddle.net/z5t1gpeo/2/