Question

刚刚开始学习HTML＆amp;的JavaScript。我有以下代码，这是有效的。但是，因为我的身体中有一个img标签，所以在点击按钮之前，它会尝试显示图像的占位符。我怎么能阻止这一点。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tesco JSONP</title>

    <script type="text/javascript">

        function picture(){ 
        var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
        document.getElementById('bigpic').src = pic.replace('90x90', '225x225');

        }


    </script>


</head>

<body>


        <img id="bigpic" src="bigpic" />

    <button onclick="picture()">Enlarge</button>

</body>

</html>

祝福。

Answer 1

在css中使用display属性，试试这个：

的javascript：

function showPicture() {
  var sourceOfPicture = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg";
  var img = document.getElementById('bigpic')
  img.src = sourceOfPicture.replace('90x90', '225x225');
  img.style.display = "block";
}

HTML：

<img style="display:none;" id="bigpic" src="bigpic" />
<button onclick="showPicture()">Enlarge</button>

Answer 2

将样式“display：none”添加到图片标记

<img id="bigpic" src="bigpic" style="display:none;"/>

在功能图片中将其更改为显示图像

document.getElementById('bigpic').style.display='block';

有demo：http://jsfiddle.net/eX5kx/

Answer 3

我喜欢shin解决方案，我会自己做同样的事情。然而，有很多方法可以做到这一点，另一个选择是将一个微小的透明图像作为默认值，然后像你对另一个一样替换。像这样：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tesco JSONP</title>

    <script type="text/javascript">

        function picture(){ 
        var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
        document.getElementById('bigpic').src = pic.replace('90x90', '225x225');

        }


    </script>


</head>

<body>

     // tiny trasparent image
    <img id="bigpic" src="https://maps.gstatic.com/mapfiles/markers2/dd-via-transparent.png" alt="" />

    <button onclick="picture()">Enlarge</button>

</body>

</html>

这样就不需要css，但就像我之前说的那样，我更喜欢Shin的解决方案。

Answer 4

有很多方法可以解决这个问题。

- 移除img标记img{border:none}

周围的边框

- 使用div和background-image，将背景图像更改为var pic。

document.getElementById('divtag').backgroundImage = pic;

仅在单击按钮时显示图像

4 个答案: