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

Question

我正在尝试使用img data-src标记而不是仅使用标记来加载图像img src.我创建了两个简单的JSFiddle,尽管只有一个有img src作品.这些是:

img data-src示例这不起作用我想知道

img src示例这一项工作.

有人可以填写空白,为什么img data-src不能正常工作？我很困惑,几个小时都在寻找答案.

Answer 1

您正在使用HTML5数据属性,这些属性不会替换HTML元素的常规HTML属性,例如src.所以你的图像需要有一个src属性,无论它是否有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".您在此答案的注释中发布的示例忽略了无效的初始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">

两种方法都可以应用于图像.例如:您可以等到用户滚动图像所在的位置,然后开始加载它,但在完全加载之前不会显示.

资源:

• 透明图像可能的最小数据URI图像
• 图片来自Oskar Krawczyk