Question

我已经尽了一切努力让它发挥作用。

我必须异步显示返回的JSON中的图像的缩略图版本。然后显示图像的完整大小版本。最后，我必须通过ID缓存它们。

我目前的工作：

body {
  font-family: sans-serif;
  background: #384047;
}

h1 {
  color: #fff;
  text-align: center
}

ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: block;
  max-width: 780px;
  text-align: center;
}

ul li {
  display: inline-block;
  padding: 8px;
  background: white;
  margin: 10px;
}

ul li img {
  display: block;
}

a {
  text-decoration: none;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
}

#overlay img {
  margin-top: 10%;
}

#overlay p {
  color: #fff;
  font-weight: 700;
  font-family: 'Comfortaa'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>

<ul>

</ul>
<div id="overlay">
  <img id="fullSize" />
</div>

{
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "http://placehold.it/600/92c952",
    "thumbnailUrl": "http://placehold.it/150/92c952"
  },

有任何帮助吗？看看我错过了什么？控制台只是给我一个混合内容错误。 “混合内容：”https://----“页面是通过HTTPS加载的，但是请求了一个不安全的资源”http://xxxx“。此请求已被阻止;内容必须通过HTTPS提供。”

另外，我能够在这里做类似的事情： https://codepen.io/rsolomonjr1/pen/zqwYrd

但是无法为此请求获得所有部分。

PS：看一下JSON的一些

adb shell dumpsys deviceidle force-idle

Answer 1

混合内容

因为您的网站是通过https加载的，但json中的图片网址不是

Answer 2

$image.attr("src", $imageLocation).replace("http://", "https://");

在此，您将$image的{{1}}属性设置为原始HTTP src，然后在返回的jQuery对象上调用$imageLocation。在拨打replace，

时进行替换

$image.attr

或处理您的JSON数据后立即。

$image.attr("src", $imageLocation.replace("http://", "https://"));

此外，您要为$("ul").append(` <li id="#imageGallery"> <a id="imager" href="${f.url.replace("http://", "https://")}"> <img src="${f.thumbnailUrl.replace("http://", "https://")}" alt="${f.title}"> </a> </li> `);个ID <li>分配多个#imageGallery元素。请改为<ul>一类imageGallery。

Answer 3

男人，你疯狂地操纵DOM。

在这里我修复了问题并尝试逐行评论

＆＃13;

$.getJSON('https://jsonplaceholder.typicode.com/photos',
  function(data) {
    //prepare variables to be used later 
    var $list = $('<ul>', {
      class: 'image-list'
    });
    var $overlay = $('#overlay');
    var $image = $("#fullSize");
    
    //build/construct the gallery 
    $(data).each(function(i, photoObject) {
      // this is a temp solution, you should ensure that 
      // all your content is served from either http or https
      photoObject.thumbnailUrl = photoObject.thumbnailUrl.replace('http://', 'https://');
      photoObject.url = photoObject.url.replace('http://', 'https://');
			
      //appened to the newly created list, don't manipulate the DOM yet
      // also you were using id="#imageGallery" for each image
      // note that ids has to be unique in the DOM tree
      $list.append('<li class="imageGallery"><a href="' + photoObject.url + '"><img data-fullimage="'+photoObject.url+'" src="' + photoObject.thumbnailUrl + '" alt="' + photoObject.title + '"></a></li>');
    });

    // manipulate the DOM one time only, not 5000 times
    $('body').prepend($list)
    
    // don't attach event listener to each image, instead,
    // attach the event to the parent .imageGallery div and run
    // your logic if the clicked element is an image which is 
    // inside this .imageGallery div.
    
    
    $('.imageGallery').on('click', 'img', function(e) {
      // the image clicked 
      
      // I am on it, don't propagate it more
      e.preventDefault();
      
      // get the full-size url from the image data attribute
      $imageLocation = $(this).data('fullimage');

      // change the single full-size image src attr
      $image.attr("src", $imageLocation)

      // finally, show the overlay
      $overlay.show();
    });
    
    // BOUNCE: close the overlay
    $overlay.on('click', function(e){
       e.preventDefault();
       $image.attr('src', '');
       $overlay.hide();
    });
  });

＆＃13;

body {
  font-family: sans-serif;
  background: #384047;
}

h1 {
  color: #fff;
  text-align: center
}

ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: block;
  max-width: 780px;
  text-align: center;
}

ul li {
  display: inline-block;
  padding: 8px;
  background: white;
  margin: 10px;
}

ul li img {
  display: block;
}

a {
  text-decoration: none;
}

#overlay {
  padding: 100px;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
}

#overlay img {
  margin-top: 10%;
}

#overlay p {
  color: #fff;
  font-weight: 700;
  font-family: 'Comfortaa'
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
  <img id="fullSize" />
</div>

＆＃13;

jquery - 来自json文件的图片库

3 个答案: