仅当图像有效时使用 jquery 附加文档

Question

我有一组图像 url，需要添加到文档中（如下所示）。一些网址不包含图像。我该如何检查？

picUrls = ["https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/048.jpg","https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18166-shivling-whatsapp-image-and-dp.jpg","http://www.fakeurl.io/fakeimage1.jpeg","https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18416-navratri-image-for-whatsapp-and-facebook.jpg"]

我正在使用 jquery 并尝试了 .load & .error

for(let i = 0; i < picUrls.length; i++) {
    const picUrl = picUrls[i];

    //create image to preload:
    var imgPreload = new Image();
    $(imgPreload).attr({
      src: picUrl
    });
    
    //check if the image is already loaded (cached):
    if (imgPreload.complete || imgPreload.readyState === 4) {
    
      //image loaded:
      //your code here to insert image into page
      $('#content-container').append(imgPreload);
    
    } else {
      //go fetch the image:
      $(imgPreload).load(function (response, status, xhr) {
        if (status == 'error') {
    
          //image could not be loaded:
          console.log('error');
        } else {
    
          //image loaded:
          //your code here to insert image into page
          $('#content-container').append(imgPreload);
    
        }
      });

Answer 1

您可以创建一个辅助函数，returns 承诺图像是否有效

      const picUrls = [
        'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/048.jpg',
        'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18166-shivling-whatsapp-image-and-dp.jpg',
        'http://www.fakeurl.io/fakeimage1.jpeg',
        'https://s3-us-west-1.amazonaws.com/codesmith-precourse-images/18416-navratri-image-for-whatsapp-and-facebook.jpg',
      ];

      const getOnlyValidImage = src =>
        new Promise((resolve, reject) => {
          const img = new Image();
          img.src = src;
          img.onload = () => resolve(img);
          img.onerror = () => resolve(null);
        });

      const preloadImages = async () => {
        for (let i = 0; i < picUrls.length; i++) {
          const picUrl = picUrls[i];
          const image = await getOnlyValidImage(picUrl)
          if (image) {
            $('#content-container').append(image);
          }
        }
      };

      preloadImages();

仅当图像有效时使用 jquery 附加文档

Only append document if image is valid using jquery

html

javascript

ajax

jquery