Javascript錯誤onload圖片淡入

我收到與我的腳本不一致的錯誤。很多時候，一切正常，但是，每一個現在，然後我收到以下錯誤：ReferenceError: fadeIn is not definedJavascript錯誤onload圖片淡入

下面是相關代碼：

在<head>

<script type="text/javascript" charset="utf-8"> 
     window.fadeIn = function(obj) { 
      var item = $(obj).parent(); 
      item.fadeIn(1000); 
     } 
    </script>

在<body>

<div class="item" style="display:none"><img onload="fadeIn(this)" src="/uploads/thumbs/{{image.url}}"><br>{{ image.description }}</div>

同樣，圖像加載現在大部分的時間，但每一個衰落，然後我得到的錯誤和TH Ë圖像不褪色。

有沒有更好的方式來處理呢？或者只是我失蹤的東西？

來源

2012-11-06 Shawn Northrop

你需要做確保您的代碼在DOM準備就緒後加載。

window.onload = function(){ 
    var fadeIn = function(obj) { 
     var item = $(obj).parent(); 
     item.fadeIn(1000); 
    }; 
};

...這是一個部分修復，但不是真的，因爲在所有的可能性，你的<img/>標籤與在onload硬編碼到他們會設法大火，方法是可用之前。

由於您使用jQuery無論如何，你應該看看這樣的：

$(function() { 
    $(".item img").load(function(){ 
     $(this).fadeIn(1000); 
    }); 
});

，並從你的img標籤擺脫硬編碼的onload的。

應該注意的，也有在.load（）API頁面上列出的注意事項：

從文檔（http://api.jquery.com/load-event/）：

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser It doesn't fire correctly in WebKit if the image src is set to the same src as before It doesn't correctly bubble up the DOM tree Can cease to fire for images that already live in the browser's cache

一個更好的解決方案可能是隱藏與CSS的圖片，加載事件被激發在此之後，淡出他們進來

（甚至比這更好的可能是讓瀏覽器的行爲是因爲你的結果可能會混合在一起，而用戶看到空白頁面時可能會彈出重新加載按鈕，因爲他們的瀏覽器會閃爍在你的動畫完成之前進行。 ...只是一個善意的警告，這些類型的DOM操作中有時可有用戶行爲意想不到的副作用！）

來源

2012-11-06 20:52:36

您可以嘗試直接在腳本中定義，而不是在HTML分配給它的處理程序..

的Javascript

<script type="text/javascript" charset="utf-8"> 
$(function() { 
     $('img').load(function() { 
      var item = $(this).parent(); 
      item.fadeIn(1000); 
     }); 
    }); 

</script>

HTML

<div class="item" style="display:none"> 
<img onload="fadeIn(this)" src="/uploads/thumbs/{{image.url}}"> 
    <br>{{ image.description }}</div>

來源

2012-11-06 20:52:31

如果jQuery的作品，將在IMG onload事件導致雙命中，導致它淡入兩次？ –

我認爲他們將被覆蓋。 –

你缺少一個文件準備好，所以jQuery的is'nt加載和淡入功能nt定義。即使圖像被加載，也無法保證jQuery也被加載。

你也實際調用你的函數淡入，而jQuery的已經有一個名爲淡入功能，即使他們有不同的命名空間它似乎是一個壞主意給我。

來源

2012-11-06 20:53:33 adeneo

n請確保您有正確的鏈接JQuery的JavaScript文件。您可以使用谷歌的託管庫爲例或創建自己的這個js文件的副本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

min.js文件可以在download section of JQuery official website找到。保存並放置到網站文件夾中。並將其鏈接，如：

<script src="/js_folder/jquery-1.8.2.min.js"></script>

來源

2012-11-06 20:54:13 Mike

另一種選擇使用jQuery：

<div class="item" style="display:none"> 
    <a href="http://docs.jquery.com/"> 
     <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"> 
    </a> 
    <p>image name</p> 
</div>

腳本：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.item').delay('1000').fadeIn('1000'); 
 }); 
</script>

http://jsfiddle.net/CYGNp/1/

來源

2012-11-06 21:02:43

Javascript錯誤onload圖片淡入

回答

相關問題