无需刷新页面即可显示img元素

Question

我需要帮助来显示一个img元素，而不必刷新页面来查看内容。

<script>      
   function init() {
       $('#pictureBox').attr('src', picture);
   }
</script>

<body onload="init();">
    <img id="pictureBox" src=""></img>
</body>

Answer 1

你应该首先preload图片(这会立即显示图片)，然后你就可以动态使用图片了。

<script>
   //preloading...
   var mypic = new Image();
   mypic.src = picture;

   $(window).load(function(){
       $('#pictureBox').attr('src', picture);
   });      
</script>

<body>
    <img id="pictureBox" src="" />
</body>

请注意，在html5标准中，img标记不能有空属性src

Answer 2

您可以改用jQuery，代码将如下所示

  <html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script type="text/javascript">     
        var picture = 'blabla/testimage.jpg';
        $(document).ready(function() {
           $('#pictureBox').attr('src', picture);
        });
       </script>
     <head/>

        <body>
            <img id="pictureBox" src=""/>
        </body>
   </html>