jQuery thay đổi <img> src với $ (bộ chọn) .prop mất một thời gian dài

Question

Vì vậy, không có vấn đề gì với chức năng mã này. Tôi có nội dung như sau:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 

Tôi có một phần khác của mã, thay đổi hình ảnh src/văn bản bằng jQuery.

function changeImage() { 
    $('#imageToChange').prop('src', '/path/image2.png'); 
    $('#textToChange').html('New Text'); 
} 

Như bạn có thể mong đợi, điều này hoạt động chính xác như tôi mong đợi. Nhưng với 1 quirk.

Trong tất cả các trình duyệt chính (chrome/FF/IE). Hình ảnh mất nhiều thời gian để thay đổi.

Ví dụ: khi tôi gọi changeImage(), văn bản sẽ thay đổi ngay lập tức nhưng hình ảnh có thể không thay đổi cho đến 1-2 giây sau. (Không phải hình ảnh lớn bởi bất kỳ khoảng cách nào, khoảng ~ 6KB và địa phương)

Tôi chưa tìm thấy ai khác thực sự phàn nàn về nó, nhưng điều tôi tự hỏi là có cách nào để tăng tốc độ thay đổi hình ảnh src? Có lẽ một cách tốt hơn để làm điều đó?

Đây cũng là jquery 1.8.0.

Cảm ơn

Answer 1

Tôi đã thấy hành vi này trước khi bạn. Sự chậm trễ là do hình ảnh không được lưu trữ và thời gian tải tiếp theo. Giải pháp duy nhất tôi biết:

1. Tải trước hình ảnh của bạn bằng JavaScript Đối tượng hình ảnh.
2. Xử lý load event trên hình ảnh và cập nhật văn bản sau khi hình ảnh được tải. Lưu ý jQuery liệt kê một số vấn đề cần xem ra cho:

Hãy cẩn thận của các sự kiện tải khi được sử dụng với hình ảnh

Một thách thức chung nhà phát triển cố gắng giải quyết bằng cách sử dụng .load() shortcut là để thực hiện một chức năng khi một hình ảnh (hoặc bộ sưu tập của hình ảnh) đã được tải hoàn toàn.Có một số cảnh báo được biết đến với điều này cần lưu ý. Đó là:

• Nó không làm việc liên tục cũng không đáng tin cậy qua trình duyệt
• Nó không bắn một cách chính xác trong WebKit nếu src hình ảnh được thiết lập để src giống như trước
• Nó không một cách chính xác bong bóng lên cây DOM
• có thể ngừng bắn cho hình ảnh đó đã sống trong bộ nhớ cache của trình duyệt

http://api.jquery.com/load-event/

Answer 2

có thể là thời gian tải hình ảnh của bạn. nếu trường hợp này xảy ra, tải hình ảnh lần đầu tiên sẽ là hình ảnh chậm nhất. một tải tiếp theo, sau khi thay đổi hình ảnh thành một thứ khác, sẽ nhanh.

$('#imageToChange').prop('src', '/path/image1.png'); 
//slow, need to fetch image 
$('#imageToChange').prop('src', '/path/image2.png'); 
//slow, need to fetch image 
$('#imageToChange').prop('src', '/path/image1.png'); 
//fast, it already has this image 

Là giải pháp, bạn có thể thử tải trước hình ảnh của mình. Hoặc, tốt hơn, sử dụng css sprites.

Answer 3

khi bạn thay đổi src của hình ảnh bạn tìm nạp một tệp hình ảnh khác. nó làm cho một yêu cầu HTTP cho hình ảnh mới, vì vậy nó cần phải tải trước khi hiển thị nó. điều này có thể là nó?

btw, vì lý do này bạn có thể tải trước hình ảnh bằng js. hoặc thêm

<img src="path/to/image.jpg" style="display: none" /> 

để html hoặc sử dụng JS

var im = new Image(1,1); 
im.src = "path/to/image.jpg"; 

cách này, hình ảnh sẽ được lưu trữ

Answer 4

Đó là sự chậm trễ của mạng. Hãy thử điều này:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 
<img src='/path/image2.png' style='display:none'> 

Answer 5

Bạn có thể tải trước hình ảnh bằng cách sử dụng đối tượng Hình ảnh Javascript.

Trong phần đầu của tài liệu của bạn đặt

<script type="text/javascript"> 
    img2 = new Image(); 
    img2.src = "/path/image2.png"; 
</script> 

Answer 6

Bạn có thể muốn thử thay đổi các thuộc tính bằng cách sử dụng jquery .attr chức năng. Nếu tôi nhớ chính xác thì thẻ src của hình ảnh là thuộc tính không phải là thuộc tính. Mặc dù cả hai .prop và .attr thực hiện chức năng tương tự, để đảm bảo hành vi nhất quán giữa các trình duyệt bạn có thể muốn sử dụng thẻ .attr thay thế.

$('#imageToChange').attr('src', '/path/image2.png'); 

Theo như độ trễ, điều này có thể là do kích thước của hình ảnh. Trình duyệt phải thực hiện yêu cầu GET đến máy chủ cho hình ảnh và sau đó vẽ DOM với nó. Nếu hình ảnh lớn, nó có thể gây ra khoảng thời gian giữa khi mã thay đổi nguồn và khi hình ảnh mới được ghi chính xác vào DOM. Nếu hình ảnh lớn, bạn có thể cân nhắc việc thu nhỏ hoặc tối ưu hóa hình ảnh để sử dụng web.

Hy vọng điều này sẽ hữu ích.