RT
目前程式碼長這樣
function cover_call()
{
$.getJSON("data/currenttrack.json",
function(b)
{
currenttrack_json=b.currenttrack;
currenttrack_length=currenttrack_json.length;
currenttrack_total_time=0;
currenttrack_total_number=0;
currenttrack_html="<img id=cover height=100px width=100px src=";
for(q=0;q<1;q++)
{
currenttrack_html+=currenttrack_json[q].coverpath;
}
currenttrack_html+="></img>";
$(".cover").html(currenttrack_html);
$("#cover").error(function(){
$("#cover").replaceWith("<img height=100px width=100px src='/img/no.png'</img>");
});
}
)
}
自動更新函式(用來自動更新上面的coverpath)
<script>
function myrefresh()
{
setInterval(function(){
$("#message").html("")
history_call();
playing_call();
requestlist_call();
subplaylist_call();
cover_call();
return false},3000);
}
setTimeout('myrefresh()',3000);
</script>
現在若coverpath的檔案存在的話會自動更新圖片且不會閃爍 但是當找不到圖片時會觸發error()函數替換成no.png且由於上面的自動更新函式的關係會每3秒閃一次
我想把他設定成找不到圖片時只會更新一次之後就不觸發,然後當找到圖片時立即更換找到的圖片
程式邏輯有幾個錯誤:
cover_call 應該只做 img src的替換動作,其他動作不應該混在一起做,也沒必要重覆做$("#cover").attr('src', url);
currenttrack_json=b.currenttrack;
currenttrack_length=currenttrack_json.length;
這兩個動作是為了?
3.如果要做到「找不到圖片時只會更新一次之後就不觸發,然後當找到圖片時立即更換找到的圖片」在執行$.getJSON("data/currenttrack.json"的時候,由cover_call判斷是否回傳的圖片是否存在或圖片是否一樣再執行1 的步驟,就能做到不會一直更新圖片
大概是這樣,你給的json不完整且有錯誤,沒辦法真的試。
<script language="javascript">
function init_cover_call()
{
$.getJSON("data/currenttrack.json",
function(b)
{
var currenttrack_json=b.currenttrack;
currenttrack_length=currenttrack_json.length;
currenttrack_total_time=0;
currenttrack_total_number=0;
currenttrack_html="<img id=cover height=100px width=100px src=";
currenttrack_html+=currenttrack_json[0].coverpath;
currenttrack_html+="></img>";
$(".cover").html(currenttrack_html);
}
)
}
function cover_call()
{
$.getJSON("data/currenttrack.json", function(b) {
var currenttrack_json = b.currenttrack;
var oldImgSrc = $(".cover").find('#cover').attr('src');
var newImgSrc = currenttrack_json[0].coverpath;
if(oldImgSrc != newImgSrc)
$(".cover").find('#cover').attr('src', newImgSrc);
}).error(function() {
$(".cover").find('#cover').attr('src', '/img/no.png');
});
}
$(function () {
init_cover_call();
function myrefresh()
{
setInterval(function(){
$("#message").html("");
history_call();
playing_call();
requestlist_call();
subplaylist_call();
cover_call();
return false},3000);
}
setTimeout('myrefresh()',3000);
});
</script>
1.意思是把error以下的丟到另一個函數執行?
2.這是內建函式的宣告
3.所以意思還是error以下的丟到另一個函數執行?
error不用執行吧,你沒有要進行error的操作丫,意思是cover_call 只是用來更換圖片,其他的動作沒必要放裡面重覆做,這樣只是把事情複雜化
不用error的話那要用啥函式判斷要不要更換成no.png?
要不要error是看你的需要,error就這樣處理,不需要用replaceWith,
不過這個error跟圖片無關,正常來說應該用ajax 的error event處理才是正確的做法。
你的作法:
$("#cover").error(function(){
$("#cover").attr('src', '/img/no.png');
});
一般的作法:
https://stackoverflow.com/questions/1740218/error-handling-in-getjson-calls
$.getJSON("example.json", function() {
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
恩 我改attr了可是還是會閃爍 是要移到別的地方去嗎 另外如果要用下面這種的程式碼應該怎改?
newImgSrc 就是新的圖片路徑,如果不一樣才更換,一樣就維持不動,
這樣就不會閃爍了,所以你要先拿到newImgSrc,邏輯要改一下
$.getJSON("example.json", function() {
var oldImgSrc = $("#cover").attr('src');
if(oldImgSrc != newImgSrc)
$("#cover").attr('src', '正確的圖片路徑');
})
.error(function() {
$("#cover").attr('src', '/img/no.png');
});
這段要寫在新的function裡還是cover_call下面?
cover_call
所以我要這樣寫?
function cover_call()
{
$.getJSON("data/currenttrack.json",
function(b)
{
currenttrack_json=b.currenttrack;
currenttrack_length=currenttrack_json.length;
currenttrack_total_time=0;
currenttrack_total_number=0;
currenttrack_html="<img id=cover height=100px width=100px src=";
for(q=0;q<1;q++)
{
currenttrack_html+=currenttrack_json[q].coverpath;
}
currenttrack_html+="></img>";
$(".cover").html(currenttrack_html);
var newImgSrc = $("#cover").attr('src');
var oldImgSrc = $("#cover").attr('src');
if(oldImgSrc != newImgSrc)
$("#cover").attr('src', 'currenttrack_html');
$("#cover").error(function() {
$("#cover").attr('src', '/img/no.png');
});
}
)
}
這一段不用每次都執行丫,一開始src給預設路徑就好
還有你的img 是動態產生的,所以$("#cover")可能會找不到,
要改成
$(".cover").find('#cover').attr('src', url);
currenttrack_html="";
$(".cover").html(currenttrack_html);
這個不是這樣寫的,這樣寫新舊路徑不就永遠都一樣~
var newImgSrc = $("#cover").attr('src');
var oldImgSrc = $("#cover").attr('src');
你給完整程式,不然會沒完沒了
這就完整程式了阿 還是你的意思說要給你整個requester.js的內容,http://ac1011.hopto.org:4095/js/requester.js
忘了說,你的json也給一下,還有getJSON回傳回來的資料是長什麼樣?
又忘了問你html?
好了解決了 看來error只能在cover_call裡運行才有效
所以我利用兩個函式分別處理
function cover_call()
{
$.getJSON("data/currenttrack.json",
function(b)
{
currenttrack_json=b.currenttrack;
currenttrack_length=currenttrack_json.length;
currenttrack_total_time=0;
currenttrack_total_number=0;
currenttrack_html="<img id=cover height=100px width=100px src=";
for(q=0;q<1;q++)
{
currenttrack_html+=currenttrack_json[q].coverpath;
}
currenttrack_html+="></img>";
$(".cover").html(currenttrack_html);
$("#cover").error(function(){
$(".cover").find('#cover').attr('src', '/img/no.png');
});
}
)
}
function fixcover_call()
{
$.getJSON("data/currenttrack.json",
function(b)
{
var currenttrack_json = b.currenttrack;
var oldImgSrc = $(".cover").find('#cover').attr('src');
var newImgSrc = currenttrack_json[0].coverpath;
if(oldImgSrc != newImgSrc)
{
$(".cover").find('#cover').attr('src', newImgSrc);
}
}
)
}
瀏覽器端則是這樣
function myrefresh()
{
setInterval(function(){
history_call();
playing_call();
requestlist_call();
subplaylist_call();
fixcover_call();
return false},3000);
}
setTimeout('myrefresh()',3000);
btw .error在現代瀏覽器似乎已經不支援了
這段寫法是多的吧, cover_call也沒必要放在myrefresh裡
currenttrack_json=b.currenttrack;
currenttrack_length=currenttrack_json.length;
currenttrack_total_time=0;
currenttrack_total_number=0;
currenttrack_html="<img id=cover height=100px width=100px src=";
for(q=0;q<1;q++)
{
currenttrack_html+=currenttrack_json[q].coverpath;
}
currenttrack_html+="></img>";
沒有cover_call()的這段誰來定義id=cover呢 一些定義是在cover_call()執行的,而且我cover_call也沒有放在myrefresh裡,放的是fixcover_call()