使用data-src加载图像而不仅仅是src [英] Loading an image using data-src and not just src

问题描述

我试图使用 img data-src 标记而不是 img src 加载图片。我创建了两个简单的JSFiddle，尽管只有 img src 可以工作。这些在这里：

img data-src示例这不工作，我想它

img src示例这是一个可行的解决方案。

有人可以填写空格，说明为什么img data-src不起作用吗？

解决方案

您正在使用 HTML5数据属性，它不会替换HTML元素的普通HTML属性，例如src 。因此，您的图片需要具有 src属性，无论它具有数据源或不是，它们都是相互独立的。

数据 - * 属性允许我们存储额外信息标准，语义HTML元素（...）

---

• 在屏幕上显示图片时加载：

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

 < img src =fake_small_image.gifdata-src =real_image.jpg> 
  

可以将 data-src code>数据whatever_you_want 。这个想法是使用JavaScript来跟踪页面的 scrollTop 位置。一旦图像出现，用 src 值fake_small_image.gif > data-src 值real_image.jpg。你在这个答案的评论中发布的例子是忽略了一个无效的初始src的赋值。

  var $ window = $（window），window_height = $ window.height（） -  150，//我使用150（随机数），所以图片显示为150px它进入屏幕后，所以效果可以赞赏$ 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％;身高：200vh; background-color：gray;}。some_img {position：absolute;顶部：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 /// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7data-src_of_original_img =https://i.imgur.com/Lcsolww.jpgalt =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>< /脚本> < img src =data：image / gif; base64，R0lGODlhAQABAIAAAAAAAP /// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7data-src_of_original_img =https://i.imgur.com/Lcsolww.jpgalt =class =some_img>  

---

可以应用于图像。例如：您可以等待用户滚动图片所在的位置，然后开始加载它，但在完全加载后才显示。

---

资源：

• 可能为透明图像的最小数据URI图像


• 图片来自Oskar Krawczyk

I am trying to load an image using the img data-src tag instead of just the img src. I have created two simple JSFiddle's although only the one with the img src works. These are here:

img data-src example THIS DOESN'T WORK AND I WANT IT TO

img src example THIS ONE DOES WORK.

Can somebody please fill in the blanks as to why the img data-src one doesn't work please? I am confused by this and been searching for an answer for hours.

解决方案

You are using HTML5 data attributes which don't replace the normal HTML attributes of an HTML element, such as src. So your image needs to have a src attribute, whether it has a data-src or not, they are both independent of each other.

data-* attributes allow us to store extra information on standard, semantic HTML elements (...)

---

• Loading an image when it appears on the screen:

A common approach to lazy-loading images is to set the src to a very small image, sometimes a 1x1px gif, and once the user scrolls and the image is on the screen replace the src with the real one. Something like this:

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

That data-src could be called data-whatever_you_want. The idea is that using JavaScript you track the scrollTop position of the page. Once the image is going to appear you replace the src value "fake_small_image.gif" with the data-src value "real_image.jpg". The example you post in the comments of this answer, is ignoring the assignment of an initial src which is invalid.

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>

---

• Show an image as soon as it is loaded:

A similar approach is to load the image virtually with JavaScript and once it is loaded assign the src to the image. This is done to prevent the image from showing before it is totally loaded.

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">

---

Both methods could be applied to an image. For example: you could wait until the user scrolls where the image is and then start to load it, but not show until it is fully loaded.

---

Resources:

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

这篇关于使用data-src加载图像而不仅仅是src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！