Tôi có mã lấy một danh sách các hình ảnh như một đối tượng nhưVuejs 2: làm thế nào để phát hiện tài sản img.complete
[
{ src: '/path/to/img.jpg', loaded: false },
...
]
và mẫu mà sau đó làm cho họ dưới dạng HTML như:
<div
v-for="image in alltheimages"
:key="image.id" >
<transition name="fade" appear>
<img
:src="image.src"
v-show="image.loaded"
@load="image.loaded = true"
/>
</transition>
</div>
Điều này hoạt động tốt khi tải trang đầu tiên; hình ảnh mờ dần ngay khi chúng được tải.
Tuy nhiên có một vấn đề khi hình ảnh là đã được nạp trong bộ nhớ cache vì sau đó các @load
không bao giờ cháy trên các yếu tố mới <img>
. Trong những tình huống này, tôi có thể kiểm tra thuộc tính .complete
của thẻ img tag, nhưng làm cách nào tôi có thể thực hiện điều đó trong VueJS?
Tôi đã thử v-show="this.complete || image.loaded"
nhưng this
chỉ trỏ tới window
. Tôi nghĩ rằng tôi có thể sử dụng một cuộc gọi phương thức và chuyển một tham chiếu đến phần tử đã bắt đầu cuộc gọi, nhưng tôi cũng không thể tìm ra cách để thực hiện điều đó.
Tôi nhận thấy mình có thể tải tất cả các hình ảnh riêng biệt với new Image()
, liên kết người nghe với sự kiện load
trước khi tôi cung cấp src
và từ đó cập nhật dữ liệu để nói nội dung được tải, nhưng toàn bộ mã và đối tượng phải là đẹp hơn rất nhiều để có thể sử dụng các phần tử DOM mà Vue tạo ra.
Có một thư viện cho vấn đề này: https://www.npmjs.com/package/vue-images-loaded –
tháng không phải là những gì bạn thích, nhưng hầu hết các thành phần của tôi chỉ có một thuộc tính 'gắn kết' mà tôi lập trình thiết lập từ sai đến đúng trong móc vòng đời được gắn kết. Điều đó sẽ cho phép bạn làm điều gì đó như v-show = "mounted && image.loaded". Nếu bạn quan tâm đến quá nhiều mã, viết một mixin cho nó? –