2017-12-26 146 views
5

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.

+0

Có một thư viện cho vấn đề này: https://www.npmjs.com/package/vue-images-loaded –

+0

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ó? –

Trả lời

0

Bạn có thể liên kết với sự kiện onLoad gốc và gọi bất kỳ phương pháp nào trong thành phần bạn muốn. demo

<div id="app"> 
    <img v-for="num in [1,2,3,4]" 
     src="http://lorempixel.com/400/200" 
     :onLoad="onLoadHandler()" /> 
</div> 


new Vue({ 
    el: '#app', 
    methods: { 
     onLoadHandler: function() { 
      alert('hi'); 
     } 
    } 
}); 
+0

Cảm ơn, nhưng tôi nghĩ điều này tương đương với mã trong câu hỏi trên. [Tài liệu VueJS cho @load/v-on-load] (https://vuejs.org/v2/api/#v-on) – artfulrobot

0

v-áo choàng có thể cung cấp các chức năng bạn đang tìm kiếm https://vuejs.org/v2/api/#v-cloak

+0

Cảm ơn, nhưng tôi không thấy chỉ thị đó có thể được sử dụng như thế nào để cung cấp một cách để thực hiện một hàm cần truy cập thuộc tính của phần tử img đã tạo. – artfulrobot

Các vấn đề liên quan