Làm cho hình ảnh mờ dần khi tải hình ảnh bằng cách sử dụng jquery

Question

Tôi có một trang đầy đủ các hình ảnh và tôi muốn mỗi hình ảnh mờ đi khi được tải. Tôi có đoạn mã sau hoạt động nhưng dường như lỗi, về cơ bản đôi khi không phải tất cả hình ảnh mờ dần.

Có ai có bất kỳ đề xuất nào về cách cải thiện điều này không.

Cảm ơn

$('.contentwrap img').hide().load(function() { 
    $(this).fadeIn(1000); 
}); 

Answer 1

được bạn gọi mà chức năng trong document.ready?

$(document).ready(function() { 
     // put all your jQuery goodness in here. 
    }); 

http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 2

đôi khi không phải tất cả các hình ảnh trong phai

Yeah, đây thường là một vấn đề khá cơ bản:. Một số hình ảnh kết thúc tải trước khi bạn đã gán cho họ một tải xử lý sự kiện. Điều này đặc biệt có khả năng khi các hình ảnh được lưu trữ.

Nếu những hình ảnh trong HTML cách đáng tin cậy duy nhất là, không may, để bao gồm một (cực kỳ xấu xí) inline onload thuộc tính:

<img src="..." alt="..." onload="$(this).fadeIn();"> 

Answer 3

Trước tiên, bạn có thể chắc chắn rằng hình ảnh của bạn được ẩn theo mặc định (loại bỏ nhu cầu về jQuery hide cuộc gọi của bạn) với một số CSS,

.contentwrap img { 
    display:none; 
} 

Và sau đó, trong document.ready của bạn, bạn có thể thử những điều sau đây. Tôi sẽ thừa nhận sẽ có một số dư thừa ở đây trong đó một số hình ảnh có thể (đằng sau hậu trường) được cố gắng mờ dần trong hai lần, nhưng kết quả cuối cùng sẽ trông giống nhau. Đây là sự cân bằng tôi sẽ thừa nhận trong việc cố gắng đưa ra một câu trả lời đơn giản cho điều này.

Tình huống sẽ có trong tài liệu của bạn. Đã có, một số hình ảnh có thể đã tải (đặc biệt là những hình ảnh đã được lưu trong bộ nhớ cache) và một số hình ảnh có thể chưa được xử lý.

// fade in images already loaded: 
$('.contentwrap img').fadeIn(1000); 
// and tell pending images to do the same, once they've finished loading: 
$('.contentwrap img').load(function() { 
    $(this).fadeIn(1000); 
}); 

Vì jQuery sẽ "ngăn" hiệu ứng hoạt ảnh của bạn, bạn có thể gọi fadeTrong đó lại và không có gì (hiển nhiên) xảy ra.

Nếu điều này là không thể chấp nhận được, bạn có thể đưa ra một số cách phức tạp hơn để kiểm tra hình ảnh nào đã bị mờ và không có, trước khi bạn đặt sự kiện tải lên chúng.

Chúc may mắn!

Answer 4

Gần đây tôi đã xử lý sự lộn xộn này. Tôi đã trả lời câu hỏi tương tự này, nhưng nó không phải là chính xác những gì bạn đang yêu cầu ...

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Answer 5

đặt mã của bạn bên trong của chức năng này. Nếu bạn sử dụng $ (tài liệu) nó hoạt động ngay khi dom được tải. Nếu bạn sử dụng cơ thể nó bắt đầu khi cơ thể được nạp đầy đủ. Bằng cách đó hình ảnh của bạn sẽ luôn mờ đi sau khi cơ thể được tải.

$('body').ready(function() { 
    //your code here 
}); 

Answer 6

Tôi chỉ trả lời này qua tại chủ đề này: jQuery How do you get an image to fade in on load?

trình cho tôi!

Answer 7

Để xử lý hình ảnh được lưu trong bộ nhớ cache, giải pháp của bobince hoạt động, nhưng như ông đã nói, nó khá xấu xí.

giải pháp sẽ được để ẩn hình ảnh của bạn trong css và sử dụng javascript sau:

$(window).load(function(){ 
    $('.contentwrap img').not(':visible').fadeIn(1000); 
}); 

function showImages() { 
    $('.contentwrap img').load(function() { 
     $(this).fadeIn(1000); 
    }); 
}); 

showImages(); 

Bằng cách này, hầu hết các hình ảnh được nạp đúng cách, và nếu họ đã được lưu trữ, và ẩn ngay lập tức (chức năng tải không có thời gian để được kích hoạt), sự kiện tải của trang sẽ khiến chúng xuất hiện. Sự kiện tải của trang đảm bảo rằng mọi thứ đã được tải.

Answer 8

Có thể sự kiện tải sẽ không được kích hoạt nếu hình ảnh được tải từ bộ nhớ cache của trình duyệt. Để giải thích cho khả năng này, chúng ta có thể kiểm tra giá trị của thuộc tính .complete của hình ảnh.

$(document).ready(function() { 

    $('img').hide(); 
    $('img').each(function(i) { 
     if (this.complete) { 
      $(this).fadeIn(); 
     } else { 
      $(this).load(function() { 
       $(this).fadeIn(); 
      }); 
     } 
    }); 
}); 

Answer 9

Nơi chút mã này trong phần của trang web:

<script> 
     $('body').ready(function() { 

     $('img').hide(); 
     $('img').each(function(i) { 
      if (this.complete) { 
       $(this).fadeIn(); 
      } else { 
       $(this).load(function() { 
        $(this).fadeIn(2000); 
       }); 
      } 
     }); 
    }); 
</script> 

Điều này có thể không phải là giải pháp hùng hồn nhất, nhưng nó được công việc làm. Nếu bạn muốn xem một ví dụ về nó trong hành động, hãy kiểm tra này site tôi sử dụng nó cho.

Answer 10

Tôi sử dụng tập lệnh thú vị của David DeSandro để kiểm tra xem hình ảnh đã được tải chưa. (ví dụ như bạn có thể viết một hàm mà thêm một lớp học để những hình ảnh được nạp, vì vậy họ sẽ mờ dần trong việc sử dụng chuyển css check it out:.
http://desandro.github.io/imagesloaded/

Answer 11

Bạn có thể mất tất cả các hình ảnh và đặt chúng vào một hình ảnh và phai mờ, nhưng sau đó tất cả đều đi vào cùng một lúc, và nó sẽ là một tập tin lớn.Nó phụ thuộc vào những gì bạn muốn sử dụng nó.