Question

我正在尝试使用requests标记而不是$this->email->from('abc@gmail.com'); $this->email->to($email); $this->email->subject($subject); $this->email->message($message); $this->email->attach('C:\Users\xyz\Desktop\images\abc.png'); if($this->email->send()) { echo 'Email send.'; } else { show_error($this->email->print_debugger()); }加载图片。我创建了两个简单的JSFiddle，尽管只有img data-src的那个有效。这些是：

img data-src example这不起作用我希望

img src example这一项工作。

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

Answer 1

您正在使用HTML5 data attributes，它不会替换HTML元素的常规HTML属性，例如src。所以你的图像需要src attribute，无论它是否有数据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">

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

资源：

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/

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

2 个答案: