Question

在我的应用程序中，我们需要动态加载图像。因此，为了提高性能，我在JSON中添加了大约200个图像链接，并随机挑选10个图像并将图像嵌入到命中列表中。

以下是加载图片的代码，

/**
 * This JS file is to load the dynamic image loading 
 * functionality. In order to improve the performance the 
 * json values are hardcoded and utilized in our function.
 */
(function($) {
    $(document).ready(function() {
        imageload.init();
    });
})(jQuery);

/** Image module
Using object Literal Design pattern to
load the image dynamically from json
through mustache.js
*/
  var lImage = new function () {
            /**
        This function loads the image links on load
        **/
        Image = function () {

            var serializedJSON = '{"image":{"link":["http://www.sample-domain/Images/generic/ThinkstockPhotos-FFC_009.jpg","http://www.sample-domain/Images/generic/ThinkstockPhotos-E014782.jpg","http://www.sample-domain/Images/generic/ThinkstockPhotos-dv875004.jpg","http://www.sample-domain/Images/generic/ThinkstockPhotos-dv871009.jpg","http://www.sample-domain/Images/generic/ThinkstockPhotos-dv561005.jpg","http://www.sample-domain/Images/generic/ThinkstockPhotos-dv0302275.jpg"]}}';
            var data = JSON.parse( serializedJSON );
              return data;
        }

        return {
            Image:Image
            };
    } ();

    /**
    End of loading image links
    **/
    var imageload= {
      _image:{},
      init:function(){
        this._image = lImage.Image();
        },
    };  /** argument string object*/

function fillTable( response ) {
        // Reduce name lookups with local function name
          var e = esc;
          var html = [],
          h = -1;
          var ahitlist =( response.hitList); // Getting from database (10 hits)
            for( var hitlist, i= -1 ;  hitlist = ahitlist[++i]; ) {
             //getting the document images randomly
              var hitlistImage = JSON.stringify(imageload._image.image.link[randomImage()]);
              html[++h] =     '<div id="resultDiv" style="display:none;width:100%"class="ibm-columns resultDivClass';
              html[++h] =     '"><div class="ibm-col-6-1 ibm-center" style="padding:20px;"><img class="ibm-downsize ibm-circle" src=';
              html[++h] =     hitlistImage;
              html[++h] =   '></div><div class="ibm-col-6-4" style="padding:20px;"><h2 class="ibm-h3 ibm-light">';
              html[++h] =     e(hitlist.title);
              html[++h] =     '</h2><p class="ibm-h4 ibm-light" >';
              html[++h] =     e(description);
              html[++h] =     '</p><p>';
              html[++h] =     e(hitlist.skcurrdate);
              html[++h] =     '</p></div><div class="ibm-col-6-1 ibm-center " style="padding:20px;"><p class="ibm-textcolor-teal-40 ">';
              html[++h] =     e(hitlist.skhtmlfid);
              html[++h] =     '">Read more</a></p></div></div>';
            }

          $('#hitlist')[0].innerHTML = html.join('');
}

function randomImage()  {
          return (Math.floor(Math.random() * 208));
      }

function esc( text ) {
          return text
              .replace( '&', '&amp;' )
              .replace( '<', '<' )
              .replace( '>', '>' );
      }

除了Mozilla隐私浏览模式外，图像在普通浏览器中完全加载。 enter image description here。如果我做错了，请建议我吗？

Mozilla隐私浏览模式下没有显示图像[Java script / Html]

0 个答案: