Images did not load on CDN (7)
Hi guys,
I have a question about CDN.
I was uploading a lander ( Wheel iphone lander )to VPS and it all works great and nice except my server is in US and the targeted country is in Indonesia ( another side of world ) and I'm using one of the cheapest plan with this spec
and I checked with friends that live there, loading speed is vary from 3-7 secs.
So I upload all those file to my CDN, including index.html all in the same folder, asked everyone to test the CDN link again, and it did GREAT... it was around 1-2 secs, but..... the images didn't load up ( all the wheels and people's comment pictures ) not even 1 single image is loaded.
I have been talking whole day with the great CS, but still can't find a solution.
anyone has any idea what happened and how to fix it ?
Thank you
Is this on Beyond Hosting's CDN?
If so, what are the customer service folk saying currently? If I recall Beyond's CDN is just an upload-it-and-go job, so it's hard to imagine anything super-techie has broken.
Could it be a problem with folders? Either the images were in a folder on your server, but they weren't uploaded to one on the CDN, or there are characters in the folder names which the CDN doesn't like?
If you can share the source code of your lander, that may help.
Yes, It is Beyondhosting CS.
They concluded that only static files can be run and nothing I can do about it, but I still don't want to believe it.
I uploaded all the files into CDN folder
Code:
<!DOCTYPE html><html lang="en"><head>
<base href="">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Selamat!</title>
<script>
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] || ''
);
}
</script>
<script>
var mydate=new Date()
mydate.setDate(mydate.getDate()-0);
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu")
var montharray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
</script>
<style type="text/css">
*{margin:0}body{font-family:tahoma,verdana,arial,sans-serif;background-color:#f7f7f7}.header{background: #3b5998;
border-top: 1px solid #3b5998;
min-height: 45px;
margin-bottom: 10px;
padding-top: 0px;}.sprite{background-image:url(spritesheet.png);background-repeat:no-repeat;display:block}.sprite-1-1{width:50px;height:50px;background-position:-5px -5px}.sprite-2-1{width:50px;height:50px;background-position:-65px -5px}.sprite-3-1{width:50px;height:50px;background-position:-5px -65px}.sprite-4-1{width:50px;height:50px;background-position:-65px -65px}.sprite-5-1{width:50px;height:50px;background-position:-125px -5px}.sprite-6-1{width:50px;height:50px;background-position:-125px -65px}.sprite-7-1{width:50px;height:50px;background-position:-5px -125px}.logo-left{padding:5px;vertical-align:middle}.header-text{font-size:20px;height:35px;vertical-align:middle;color:#FFF}.spinnerContainer{position:relative;transform:translateX(20%)}#clicker,#clicker2{display:none}.clearfix::after,.clearfix::before{content:"";display:table}.clearfix::after{clear:both}.fbcoms{padding:0 5px;font-family:Tahoma,Verdana,sans-serif;background-color:#fff;font-size:12px;text-align:left}.comments{font-weight:700;text-align:center;padding:0 5px 10px}.totlikes{margin-top:3px;background-color:#eeeff4;padding:5px 5px 5px 23px;background-repeat:no-repeat;background-position:5px center}.fbblue{color:#3c5a96}.buttons{margin-top:14px;padding:5px;font-family:Arial,sans-serif;color:#3b5998}.buttons span{cursor:pointer}.buttons span:hover{text-decoration:underline}.viewmore{margin-top:3px;background-color:#eeeff4;padding:5px 5px 5px 23px;background-position:5px center;background-repeat:no-repeat}.left{cursor:pointer;float:left;color:#3c5a96}.left:hover{text-decoration:underline}.right{color:#7d7d7f;float:right}div,main,article,aside,footer,nav,section,header{display:inline}span{display:block}h1,h2,h3{display:inline}.item{position:relative;margin-top:3px;background-color:#eeeff4;padding:5px 5px 5px 60px;min-height:60px;box-sizing:border-box}.item .profileimg{position:absolute;top:5px;left:5px}.comtxt{line-height:16px}.name{color:#070707;font-weight:700}.ago{color:#86878c;font-size:.95em}.fblike{color:#3c5a96;font-size:.95em;cursor:pointer}.fblike:hover{text-decoration:underline}.combot{padding-top:5px}.likes{color:#3c5a96;font-size:.95em;cursor:pointer}.comments,.hidden .combot,.hidden .comtxt{display:none}#fbalert>div{margin-left:0}#fbalert{background-color:#fff;padding:5px}#spinner{position:relative;margin:1em auto 0;width:315px;overflow:hidden}@media(min-width:360px){#spinner{width:340px}}#spinBG{z-index:1;width:315px}@media(min-width:360px){#spinBG{width:340px}}#spin{z-index:2;position:absolute;top:8px;left:8px;width:300px}@media(min-width:360px){#spin{width:325px}}#win,#win2,#win3,#winP,#winP1,#winP2{position:absolute;z-index:3;width:65px;left:126px;top:120px}@media(min-width:360px){#win,#win2,#win3,#winP,#winP1,#winP2{width:90px}}#win2,#win3,#winP,#winP1,#winP2{display:none}.spinAround{-webkit-animation:spin 6.6s;-moz-animation:spin 6.6s;-o-animation:spin 6.6s;animation:spin 6.6s;-webkit-animation-timing-function:ease;-moz-animation-timing-function:ease;-o-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-direction:normal;-moz-animation-direction:normal;-o-animation-direction:normal;animation-direction:normal;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}90%{-webkit-transform:rotate(3110deg);transform:rotate(3110deg)}95%{-webkit-transform:rotate(3108deg);transform:rotate(3108deg)}100%{-webkit-transform:rotate(3109deg);transform:rotate(3109deg)}}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}90%{-moz-transform:rotate(3110deg);transform:rotate(3110deg)}95%{-moz-transform:rotate(3108deg);transform:rotate(3108deg)}100%{-moz-transform:rotate(3109deg);transform:rotate(3109deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg);transform:rotate(0deg)}90%{-o-transform:rotate(3110deg);transform:rotate(3110deg)}95%{-o-transform:rotate(3108deg);transform:rotate(3108deg)}100%{-o-transform:rotate(3109deg);transform:rotate(3109deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}90%{-webkit-transform:rotate(3110deg);-moz-transform:rotate(3110deg);-o-transform:rotate(3110deg);transform:rotate(3110deg)}95%{-webkit-transform:rotate(3108deg);-moz-transform:rotate(3108deg);-o-transform:rotate(3108deg);transform:rotate(3108deg)}100%{-webkit-transform:rotate(3109deg);-moz-transform:rotate(3109deg);-o-transform:rotate(3109deg);transform:rotate(3109deg)}}.spinAround2{-webkit-animation:spinTwo 6.6s;-moz-animation:spinTwo 6.6s;-o-animation:spinTwo 6.6s;animation:spinTwo 6.6s;-webkit-animation-timing-function:ease;-moz-animation-timing-function:ease;-o-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:1;-moz-animation-iteration-count:1;-o-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-direction:normal;-moz-animation-direction:normal;-o-animation-direction:normal;animation-direction:normal;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes spinTwo{0%{-webkit-transform:rotate(3109deg);transform:rotate(3109deg)}90%{-webkit-transform:rotate(6314deg);transform:rotate(6314deg)}95%{-webkit-transform:rotate(6312deg);transform:rotate(6312deg)}100%{-webkit-transform:rotate(6313deg);transform:rotate(6313deg)}}@-moz-keyframes spinTwo{0%{-moz-transform:rotate(3109deg);transform:rotate(3109deg)}90%{-moz-transform:rotate(6314deg);transform:rotate(6314deg)}95%{-moz-transform:rotate(6312deg);transform:rotate(6312deg)}100%{-moz-transform:rotate(6313deg);transform:rotate(6313deg)}}@-o-keyframes spinTwo{0%{-o-transform:rotate(3109deg);transform:rotate(3109deg)}90%{-o-transform:rotate(6314deg);transform:rotate(6314deg)}95%{-o-transform:rotate(6312deg);transform:rotate(6312deg)}100%{-o-transform:rotate(6313deg);transform:rotate(6313deg)}}@keyframes spinTwo{0%{-webkit-transform:rotate(3109deg);-moz-transform:rotate(3109deg);-o-transform:rotate(3109deg);transform:rotate(3109deg)}90%{-webkit-transform:rotate(6314deg);-moz-transform:rotate(6314deg);-o-transform:rotate(6314deg);transform:rotate(6314deg)}95%{-webkit-transform:rotate(6312deg);-moz-transform:rotate(6312deg);-o-transform:rotate(6312deg);transform:rotate(6312deg)}100%{-webkit-transform:rotate(6313deg);-moz-transform:rotate(6313deg);-o-transform:rotate(6313deg);transform:rotate(6313deg)}}ol,ul{list-style:none}.clearfix:after{content:" ";display:block;height:0;clear:both;overflow:hidden;visibility:hidden}.clearfix{display:block}.wrapper{background-color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:7px;width:96%;margin:0 auto 14px;border:1px solid #c4cde1;border-top:0;max-width:414px}.logo{display:block;margin:4px auto}.txt{padding:5px 6px;line-height:18px;text-align:center}.bottom{width:92%;margin:20px auto 0;border:1px solid #ccc;background-color:#f2f2f2;padding:5px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}.now{text-align:center;padding-top:5px}#countdown{font-weight:bold}.rules{color:#1b316c;padding:4px 5px;line-height:22px}a{display:block;background-color:#3b5998;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;padding:10px 0;text-align:center;font-weight:700;color:#fff;font-size:1.6em;margin:7px 13px 5px;text-decoration:none}.title{text-align:center;font-weight:700;font-size:26px}.show-all{display:none}.now2{padding-top:10px;font-weight:bold}.none{background: #fff;}a.cta {background-color: #3b5998}
.container{
width: 100%;
max-width: 400px;
padding-left: 20px;
padding-right: 10px;
}
.wrapper{max-width:800px;width:96%;margin:0 auto;}
.reviews{width:100%;margin-top: 20px;background-color:#fcfbf6;border-bottom:1px solid #e5e5e5;-moz-box-shadow:0px 0px 2px 2px #d2d2d2;-webkit-box-shadow:0px 0px 2px 2px #d2d2d2;box-shadow:0px 0px 2px 2px #d2d2d2;padding:0px;border-radius:3px;}hr{opacity:0.2;}.roundimg{border-radius:50%;width:50px;}.reviews h2{font-size:1.2em;font-weight:300;padding:20px 0px 5px;}.reviews hr{opacity:0.2;}.commentpad{padding-left:10px;}.date{padding-top:5px;color:#4B4B4B;font-size:15px;}.commentpad{padding-left:10px;}
.header a.item {
float: left;
display: block;
background: 0;
width: 100%;
overflow: hidden;
text-align: center;
height: 45px;
padding: 0;
margin: 0
}
.header a.item span {
background-size: 100% 100%;
background-color: #1428a0;
display: block;
width: 100%;
height: 100%;
margin: 0 auto
center p {
color: black;
}
</style>
</head>
<body onload="spinnerAction()">
<script type="text/javascript">
(function () {
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
navigator.vibrate([1000, 500]);
})();
</script>
<div class="header"><table style="width: 100%;" cellpadding="0" cellspacing="0" border="0px">
<tbody><tr>
<td><img src="fb7.jpg"></td>
<td><img src="fb11.jpg"></td>
<td><img src="fb8.jpg"></td>
</tr>
</tbody></table></div>
<div class="hide-all">
<div id="fbalert"> <font ;="" color="#3b5998" size="3"> <center> <strong> <p> Anda telah dipilih untuk kesempatan untuk memenangkan sebuah iPhone baru 6s dan hadiah lainnya! </p> </strong> <font ;="" color="#3b5998" size="2"> <p> Setiap <script language="Javascript">document.write(dayarray[mydate.getDay()]);</script>Rabu kita pilih pengguna <script>document.write(getURLParameter('model'))</script> beruntung di <script>document.write(getURLParameter('city'))</script>. Anda memenuhi syarat untuk satu putaran pada roda beruntung. </p></font> </center>
</font>
<div style="padding-top:5px;color:#9c9c9c;font-size:11px"> </div>
</div>
<div id="spinner"> <img id="spinBG" src="spinBG.png" height="340" width="340"> <img id="spin" src="spin3.png" height="325" width="325"> <img onclick="startSpin()" id="win" src="putar.png"> <img onclick="spin2()" id="win2" src="putar.png"> <img id="winP" src="putar.png"> </div>
<div class="reviews wrapper">
<div class="wrapper">
<h2>Komentar:</h2>
</div>
<table class="wrapper" style="padding-top:8px;">
<tbody><tr>
<td align="right" valign="top" width="50px"><i class="sprite sprite-1-1"></i></td>
<td class="commentpad" align="left" valign="top">
<div class="name">Ade Agusalim</div>
<div class="text">Mencintai kesepakatan iPhone baru ini! Waktu untuk mengubah dari Samsung saya tua! </div>
<div class="date"><font ;="" size="2"><script>
mydate.setDate(mydate.getDate() - 1);
month = mydate.getMonth();
daym = mydate.getDate();
if (daym < 10) daym = "0" + daym;
document.write("" + montharray[month] + " " + daym + "");
</script>Maret 29 </font></div>
<hr>
</td>
</tr>
</tbody></table>
<table class="wrapper">
<tbody><tr>
<td right"="" align="" valign="top" width="50px"><i class="sprite sprite-2-1"></i></td>
<td class="commentpad" align="left" valign="top">
<div class="name">Glenna Cahyadi </div>
<div class="text"> Siapa pun yang ingin bertukar dengan saya silahkan silahkan silahkan? Hanya PM saya :) <p></p>
</div>
<div class="date"><font ;="" size="2"><script>
mydate.setDate(mydate.getDate() - 1);
month = mydate.getMonth();
daym = mydate.getDate();
if (daym < 10) daym = "0" + daym;
document.write("" + montharray[month] + " " + daym + "");
</script>Maret 29</font></div>
<hr>
</td>
</tr>
</tbody></table>
<table class="wrapper">
<tbody><tr>
<td right"="" align="" valign="top" width="50px"><i class="sprite sprite-3-1"></i></td>
<td class="commentpad" align="left" valign="top">
<div class="name">Doddy Lie</div>
<div class="text">Ini menakjubkan! saya tidak pernah memenangkan sesuatu sebelum tapi hari ini saya beruntung!! Terima kasih Apple <br><img src="iphonenews.jpg"></div>
<div class="date"><font ;="" size="2"><script>
mydate.setDate(mydate.getDate() - 1);
month = mydate.getMonth();
daym = mydate.getDate();
if (daym < 10) daym = "0" + daym;
document.write("" + montharray[month] + " " + daym + "");
</script>Maret 29</font></div>
<hr>
</td>
</tr>
</tbody></table>
<table class="wrapper">
<tbody><tr>
<td right"="" align="" valign="top" width="50px"><i class="sprite sprite-4-1"></i></td>
<td class="commentpad" align="left" valign="top">
<div class="name">Yuliani Salim</div>
<div class="text">Haha ini bukanlah lelucon! Memang saya tidak percaya!</div>
<div class="date"><font ;="" size="2"><script>
mydate.setDate(mydate.getDate() - 1);
month = mydate.getMonth();
daym = mydate.getDate();
if (daym < 10) daym = "0" + daym;
document.write("" + montharray[month] + " " + daym + "");
</script>Maret 29</font></div>
<hr>
</td>
</tr>
</tbody></table>
<table class="wrapper">
<tbody><tr>
<td right"="" align="" valign="top" width="50px"><i class="sprite sprite-5-1"></i></td>
<td class="commentpad" align="left" valign="top">
<div class="name"> Sukarno Budiaman</div>
<div class="text">Aku tidak percaya saya benar-benar dapat menerima gratis iPhone! Mencintai naik emas baru!
</div>
<div class="date"><font ;="" size="2"><script>
mydate.setDate(mydate.getDate() - 1);
month = mydate.getMonth();
daym = mydate.getDate();
if (daym < 10) daym = "0" + daym;
document.write("" + montharray[month] + " " + daym + "");
</script>Maret 29</font></div>
<hr>
</td>
</tr>
</tbody></table>
<table class="wrapper">
<tbody><tr>
<td right"="" align="" valign="top" width="50px"><i class="sprite sprite-6-1"></i></td>
<td class="commentpad" align="left" valign="top">
<div class="name">Sri Yuwono</div>
<div class="text">Merasa tidak yakin jika ini adalah nyata, tetapi gambar mengatakan semua!<br><img src="iphonemail.jpg"> </div>
<div class="date"><font ;="" size="2"><script>
mydate.setDate(mydate.getDate() - 1);
month = mydate.getMonth();
daym = mydate.getDate();
if (daym < 10) daym = "0" + daym;
document.write("" + montharray[month] + " " + daym + "");
</script>Maret 29</font></div>
<hr>
</td>
</tr>
</tbody></table>
<table class="wrapper">
<tbody><tr>
<td right"="" align="" valign="top" width="50px"><i class="sprite sprite-7-1"></i></td>
<td class="commentpad" align="left" valign="top">
<div class="name"> Iwan Tedjo </div>
<div class="text">DHL menghubungi saya hari ini, tampak seperti siapa pun bisa menang:-). Apple terima kasih!<br><img src="item1.jpg">
</div>
<div class="date"><font ;="" size="2"><script>
mydate.setDate(mydate.getDate() - 1);
month = mydate.getMonth();
daym = mydate.getDate();
if (daym < 10) daym = "0" + daym;
document.write("" + montharray[month] + " " + daym + "");
</script>Maret 29</font></div>
<hr>
</td>
</tr>
</tbody></table>
<br>
<!--table class="footer wrapper">
<tr>
<td align="right"><img src="img/footer1.jpg"/></td>
</tr>
</table-->
</div>
</div>
<div class="show-all">
<div class="wrapper">
<div class="title">
<p> Selamat! </p>
</div><div><img src="compo.png" class="logo" style="width:185px!important"></div>
<p class="txt">
Pahala potensi Anda: iPhone 6s, Samsung S6, Blackberry!
<br>
<font ;="" color="#FF4040"> <strong>Terburu-buru, hanya 3 ponsel kiri </strong></font></p>
<p class="now now2"> Ikuti petunjuk di bawah untuk mengklaim hadiah Anda! </p>
<div class="bottom">
<p class="rules"> 1. Klik "OK" untuk melanjutkan. </p>
<p class="rules"> 2. Pilih hadiah Anda. </p>
<p class="rules"> 3. Masukkan informasi Anda untuk kesempatan untuk memenangkan! </p>
<a href="http://soee.voluumtrk.com/click/1" class="cta" onclick="exit_b1();PreventExitPop=false"> OK --> </a>
<p class="now"> Penawaran ini tentunya berlaku selama <font ;="" color="#FF4040"><span id="countdown"> 60 </span></font> detik. </p>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
</body></html>
Hmm - that should only be an issue if you're trying to run server-side code in there. Are you running any PHP/Node.js/Ruby/Python/etc?
Looks like all client-side Javascript to me, which will run fine from a CDN.
Can you PM me the URL of the page on the CDN? I'd need to look at what it's doing to see if I can figure out the problem.
OK, found your problem.
For some reason, the CDN interprets
<img src="fb7.jpg">
So all your images are trying to load from the /ID/directory and not working.
To solve that: change every img tag to reference the directory. For example:
<img src="fb7.jpg">
<img src="/iphone/fb7.jpg">
Hi Caurmen,
I changed it to src="/ID/iphone01/fb7.png" and it works, I guess I have make the path clear instead of collecting them all in 1 folder if I use CDN ? Does it happen to other CDN also or only for beyondhosting ?
Thank you very much for the help, now I all become alot clearer.
I think it's a quirk of Beyond's CDN. I recall something like this from last time I used it.
Home > Technical & Creative Skills > Design - Imagery, Banners & Landers