iT邦幫忙

0

jquery 使用error()函數圖片一直閃爍

  • 分享至 

  • xImage

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秒閃一次

我想把他設定成找不到圖片時只會更新一次之後就不觸發,然後當找到圖片時立即更換找到的圖片

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

2
最佳解答

程式邏輯有幾個錯誤:

  1. cover_call 應該只做 img src的替換動作,其他動作不應該混在一起做,也沒必要重覆做$("#cover").attr('src', url);

  2. 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');
/images/emoticon/emoticon05.gif

你給完整程式,不然會沒完沒了 /images/emoticon/emoticon10.gif

這就完整程式了阿 還是你的意思說要給你整個requester.js的內容,http://ac1011.hopto.org:4095/js/requester.js

忘了說,你的json也給一下,還有getJSON回傳回來的資料是長什麼樣?

又忘了問你html? /images/emoticon/emoticon06.gif

好了解決了 看來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裡 /images/emoticon/emoticon10.gif

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呢/images/emoticon/emoticon10.gif 一些定義是在cover_call()執行的,而且我cover_call也沒有放在myrefresh裡,放的是fixcover_call()

另外q也沒必要寫迴圈~該給個最佳解答了
/images/emoticon/emoticon06.gif

恩 q的確不用寫迴圈......

sam0407 iT邦大師 1 級 ‧ 2018-05-25 13:45:34 檢舉

雖然前端看不太懂,純為kksugsay大認真回文點讚~

我要發表回答

立即登入回答