时间戳

首页 > 解决方案 > 图像闪烁然后消失 HTML

javascript - 图像闪烁然后消失 HTML

问题描述

我有一个简单的代码来构建图像路径，然后从我的 CDN 中获取它，但是每当我在 localhost 服务器上打开页面时，图像都会闪烁然后消失。我的 CSS 做错了吗？

HTML

<!DOCTYPE html>
<html>
<head>
<!-- One G Fruit Salad Script -->
<script>
//VarLoader
var imgsource = document.getElementById("imgad");
var htmlsource = document.getElementById("htmlad");



//FuncLoader
//Pineapple is the final extension of the URL
var pineapple = "";
function getImgType (type) {
  if (type == "html") {
    pineapple = ".html";
  } else if (type == "png") {
    pineapple = ".png";
  } else if (type == "jpg") {
    pineapple = ".jpg";
  } else if (type == "jpeg") {
    pineapple = ".jpeg";
  } else if (type == "gif") {
    pineapple = ".gif";
  } else if (type == "htm") {
    pineapple = ".htm";
  } else {
    System.out.println("Error");
  };
};
//Post Ad Code
function postAd(creative, preset) {
  if (preset == ".html") {
    document.getElementById("htmlad").src = passionfruit;
  }
  else if (preset == ".htm") {
    document.getElementById("htmlad").src = passionfruit;
  }
  else {
    document.getElementById("imgad").src = passionfruit;
  }
};
// ### One-G FruitSalad ## //
//CodeLoader

//Mango is the URL that was passed, in raw format
var mango = window.location.search;
//Papaya is the content of the querystring. Use this in querying parameters
var papaya = new URLSearchParams(mango);
//Apple is the creativeid of the creative
var apple = papaya.get('cid');
var melon = papaya.get('type');
//Initial Creative link. Change as the CDN Endpoint changes
getImgType(melon);
var passionfruit = "https://storefrontads.fra1.cdn.digitaloceanspaces.com/creatives/" + apple + pineapple;
//Fruit Salad is Mixed in the body
//Make sure to include pathname for HunterTagger
</script>
<style>
body{
  height:250px;
  width:300px;
}
div {
  width: 300px;
  height: 250px;
}
#imgad {
  height: 250px;
  width: 300px;
}
#LogoIMG {
  padding-left: 268px;
  padding-bottom: 32px;
}
</style>
</head>
<body>
  <div id="adimg" class="AdImgClass">
    <a href="https://google.com/" target="_blank">
      <img id="imgad" src=""></img>
    </a>
  </div>
  <div id="OneGLogo" class="LogoClass">
    <a href="https://storefront.one-g.net/servedbyoneg/" target="_blank">
      <img id="LogoIMG" src="https://storefrontads.fra1.cdn.digitaloceanspaces.com/one-g.png">
    </a>
  </div>
  <script>
  //Mix fruit Salad
  postAd(passionfruit, pineapple);
  </script>
</body>

我不完全确定我做错了什么。看其他帖子没有帮助。源代码看起来不错，其他一切正常，它建立了链接就好了。

标签： javascripthtmlcss

解决方案

当您打开控制台时，您会看到一个System未定义的错误（您可以在浏览器中使用 F12 键打开控制台）。要在 javascript 中写出调试日志消息，您必须使用console.log而不是System.out.println.

所以你的代码应该是这样的：

<!DOCTYPE html>
<html>
<head>
<!-- One G Fruit Salad Script -->
<script>
//VarLoader
var imgsource = document.getElementById("imgad");
var htmlsource = document.getElementById("htmlad");



//FuncLoader
//Pineapple is the final extension of the URL
var pineapple = "";
function getImgType (type) {
  if (type == "html") {
    pineapple = ".html";
  } else if (type == "png") {
    pineapple = ".png";
  } else if (type == "jpg") {
    pineapple = ".jpg";
  } else if (type == "jpeg") {
    pineapple = ".jpeg";
  } else if (type == "gif") {
    pineapple = ".gif";
  } else if (type == "htm") {
    pineapple = ".htm";
  } else {
    console.log("Error");
  };
};
//Post Ad Code
function postAd(creative, preset) {
  if (preset == ".html") {
    document.getElementById("htmlad").src = passionfruit;
  }
  else if (preset == ".htm") {
    document.getElementById("htmlad").src = passionfruit;
  }
  else {
    document.getElementById("imgad").src = passionfruit;
  }
};
// ### One-G FruitSalad ## //
//CodeLoader

//Mango is the URL that was passed, in raw format
var mango = window.location.search;
//Papaya is the content of the querystring. Use this in querying parameters
var papaya = new URLSearchParams(mango);
//Apple is the creativeid of the creative
var apple = papaya.get('cid');
var melon = papaya.get('type');
//Initial Creative link. Change as the CDN Endpoint changes
getImgType(melon);
var passionfruit = "https://storefrontads.fra1.cdn.digitaloceanspaces.com/creatives/" + apple + pineapple;
//Fruit Salad is Mixed in the body
//Make sure to include pathname for HunterTagger
</script>
<style>
body{
  height:250px;
  width:300px;
}
div {
  width: 300px;
  height: 250px;
}
#imgad {
  height: 250px;
  width: 300px;
}
#LogoIMG {
  padding-left: 268px;
  padding-bottom: 32px;
}
</style>
</head>
<body>
  <div id="adimg" class="AdImgClass">
    <a href="https://google.com/" target="_blank">
      <img id="imgad" src=""></img>
    </a>
  </div>
  <div id="OneGLogo" class="LogoClass">
    <a href="https://storefront.one-g.net/servedbyoneg/" target="_blank">
      <img id="LogoIMG" src="https://storefrontads.fra1.cdn.digitaloceanspaces.com/one-g.png">
    </a>
  </div>
  <script>
  //Mix fruit Salad
  postAd(passionfruit, pineapple);
  </script>
</body>

另外：禁用您的广告拦截器！id="adimg"会触发它！

推荐阅读