单击缩略图并将图像加载到空 div答案

【问题标题】：click thumbnail and load image into empty div单击缩略图并将图像加载到空 div
【发布时间】：2012-08-25 17:54:27
【问题描述】：

从缩略图加载图像似乎已经令人作呕，但我就是想不通。这是我的 html，其中#sideWall 持有拇指，我希望高分辨率进入#photoHolder...

<div id="graphicContainer">
<div id="sideWall">
    <span class="sideHead">EXHIBITS</span><br/>
    <span class="sideChatter">Click an image to learn more.</span><br/>
    <img src="images/frisco4501_t.jpg" full="frisco4501.jpg" />
    <img src="images/centennial_t.jpg" full="centennial.jpg" />
    <!--     etc...     -->
</div> <!--End of sidewall-->
<div id="photoHolder"></div>

这是我的美元。 alert() 正在返回正确的目录并且淡入淡出正在工作，图像只是没有加载......

$('#sideWall img').each(function(){
    $this = $(this);
    $image = "../images/"+$this.attr('full');
    $this.click(function(){
        alert($image);
        $("#photoHolder").html('<img src="'+$image +'" />');
        $("#photoHolder").fadeIn(2000);         
    })
});

【问题讨论】：

为什么你得到的属性是'full'而不是'src'？
全图不在同一目录下？
@immanish 'src' 是一个单独的图像，末尾带有“_t”。完整的 rez 版本没有“_t”。两者都在同一个目录中。
@immanish 'index.html' 位于带有 'includes' 和 'images' 的目录中，而 hi-rez 位于 'images' 目录中。
从 $image 中删除 '../'

标签： jquery load thumbnails

【解决方案1】：

我认为，解决方案可以更简单：

$('#sideWall img').click(function(){
  var c = $(this).attr("src").replace('_t.','.');
  $("#photoHolder").html('<img src="'+ c +'" />');
  $("#photoHolder").fadeIn(2000);         
})

确定以防万一（常见的实践）-拇指具有相同的名称并且位于同一目录中。那么就不需要属性“full”了。

【讨论】：

谢谢，这已经解决了。看了这个，还是不确定我原来的代码哪里坏了？
如果您的警报显示目录，那么只有 '$this.attr('full')' 会遇到麻烦。
下载的图片可以缓存吗？
缓存由浏览器管理。如果要预加载全尺寸图像，则让它们加载到页面末尾以隐藏容器。它们将在缩放时从浏览器缓存中获取。

【解决方案2】：

不需要.each()。 jQuery 开箱即用地处理集合。
另外，使用 HTML5 data-* 属性来存储较大的图像 src 字符串：

$('#sideWall').on('click', '[data-src2x]', function() {
  const src2x = $(this).data('src2x');
  $("#photoHolder").hide().html(`<img src="${src2x}">`).fadeIn();         
});

<div id="graphicContainer">

  <div id="sideWall">
      <h4 class="sideHead">EXHIBITS</h4>
      <p class="sideChatter">Click an image to learn more.</p>
      <img src="http://placehold.it/100x50/cf5" data-src2x="http://placehold.it/200x100/cf5" />
      <img src="http://placehold.it/100x50/f0f" data-src2x="http://placehold.it/200x100/f0f" />
  </div>
  
  <div id="photoHolder"></div>
  
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

【讨论】：

【解决方案3】：

我会尝试这样的事情：

$('#sideWall img').click(function(){
    $image = "../images/"+$(this).attr('data-full');
    alert($image);
    $("#photoHolder").html('<img src="'+$image +'" />').fadeIn(2000);         
});

不必对其进行测试，但它应该可以工作。请注意，我将 attr 'full' 更改为 'data-full' 以使其 HTML5 有效。

【讨论】：