Javascript 启动时未加载映像_Javascript_Html_Image

Javascript 启动时未加载映像

javascript html image

Javascript 启动时未加载映像,javascript,html,image,Javascript,Html,Image,我有这个代码我在我的网站上使用，但图像不加载页面打开时，我希望图像加载从启动，然后一个简单的鼠标在改变图像和链接时点击。我不擅长编码，所以任何帮助都是好的这是我使用的代码 <!doctype html> <html> <body> <head> <script> function init() { setImageOne(); } function setImageOne() { se

我有这个代码我在我的网站上使用，但图像不加载页面打开时，我希望图像加载从启动，然后一个简单的鼠标在改变图像和链接时点击。我不擅长编码，所以任何帮助都是好的

这是我使用的代码

<!doctype html>
<html>
 <body>
 <head>
  <script>
    function init() {
        setImageOne();
    }

    function setImageOne() { setImage('http://earthbounds.com/banners/amazing food.jpg'); }

    function setImageTwo() { setImage('http://earthbounds.com/banners/amazing food 2.jpg'); }

    function setImage(src) {
        var canvas = document.getElementById("e");
        var context = canvas.getContext("2d");
        if (context == null) return;
        var img = new Image();
        img.src = src;
        context.drawImage(img, 0, 0, 322, 200);
    }
  </script>
</head>


函数init（）{
setImageOne（）；
}
函数setImageOne（）{setImage（'http://earthbounds.com/banners/amazing food.jpg'）；}
函数setImageTwo（）{setImage（'http://earthbounds.com/banners/amazing 食品2.jpg'）；}
函数setImage（src）{
var canvas=document.getElementById（“e”）；
var context=canvas.getContext（“2d”）；
if（context==null）返回；
var img=新图像（）；
img.src=src；
drawImage（img，0，0，322200）；
}

浏览器中不支持画布

在绘制图像之前，需要等待图像加载。此外，如果您的浏览器不支持画布，则此方法对您没有任何帮助

function setImage(src) {
    var canvas = document.getElementById("e");
    var context = canvas.getContext("2d");
    if (context == null) return;
    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, 322, 200);
    };
    img.src = src;

}

您应该等待图像加载。因此，您的代码应该是（带有关于html标记的更正）：


函数init（）{
setImageOne（）；
}
函数setImageOne（）{setImage（'http://earthbounds.com/banners/amazing food.jpg'）；}
函数setImageTwo（）{setImage（'http://earthbounds.com/banners/amazing 食品2.jpg'）；}
函数setImage（src）{
var canvas=document.getElementById（“e”）；
var context=canvas.getContext（“2d”）；
if（context==null）返回；
var img=新图像；
img.onload=函数（）{
背景图（img，10,10）；
};
img.src=src；
}
init（）；

这仅适用于支持canvas ex:Chrome（ium）的浏览器

此外，我建议您阅读

这是您尝试的第一种方法吗？如果你只是想在一个网站上添加一个图片，并将鼠标悬停在上面，有一个更简单的方法

首先，不要使用Javascript创建和加载图像，而是使用HTML

标记，例如：

<img src="http://earthbounds.com/banners/amazing food.jpg">

<img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')">

现在使用

希望这对你有所帮助，继续寻找和学习

如果你的浏览器中没有画布支持，为什么要调用画布js方法？谢谢你的帮助，但是当我使用你给我的额外代码时，图像现在根本不会加载。我编辑了我的答案。很抱歉，在设置源代码之前，您必须先设置回调。Dylan N，实际上您刚才给我的代码是我的第一选择，但无法使其工作，因此我决定html5画布可能更好。我完全复制了你给我的代码，但它似乎也不起作用。

<img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')">

<a href="www.google.ca"><img src="http://earthbounds.com/banners/amazing food.jpg" onmouseover="this.src('http://earthbounds.com/banners/amazing food 2.jpg')" onmouseout="this.src('http://earthbounds.com/banners/amazing food.jpg')"></a>