Đồng vị jQuery khi tải đầu tiên không hoạt động, Làm cách nào để chờ tất cả tài nguyên/hình ảnh được tải?

Question

Tôi đã có một cái gì đó tôi đã sáng tác dựa trên jQuery đồng vị ở đây .. http://jsbin.com/eziqeq/6/edit

Có vẻ như để làm việc nói chung nhưng khi nạp đầu tiên, trong một tab mới, plugin đồng vị là thiết lập chiều cao của phần tử wrapper 0. Nếu tôi làm mới trang nó hoạt động và đặt chiều cao của phần tử gốc dựa trên các mục được tìm thấy bên trong.

Mọi trợ giúp sẽ được đánh giá cao. Tôi không thể nghĩ tại sao off này tải đầu tiên này không phải là làm việc và tải lại tiếp theo nó là .. trừ khi nó có lẽ một cái gì đó để làm với bộ nhớ đệm những hình ảnh nó tải?

EDIT--

Đây là vấn đề bộ nhớ đệm trong các trình duyệt Webkit như nó hoạt động trên Firefox và trên một tab làm việc khi tôi xóa bộ nhớ cache và làm mới trang nó sẽ không hoạt động cho đến khi làm mới một lần nữa.

Answer 1

Bạn cần sử dụng plugin imagesLoaded trong chrome. Chờ cho đến khi tất cả hình ảnh được tải trước khi khởi tạo đồng vị

Answer 2

Bạn có thể sử dụng plugin như được đề xuất bởi mkoryak.

hoặc bạn có thể sử dụng như sau: (không cần plugin - jQuery chỉ):

// jQuery - Wait until images (and other resources) are loaded 
$(window).load(function(){ 
    // All images, css style sheets and external resources are loaded! 
    alert('All resources have loaded'); 
}); 

Sử dụng phương pháp trên, bạn cũng có thể chắc chắn rằng tất cả các CSS stylesheets được nạp cũng (để đảm bảo trang của bạn được hiển thị đúng khi isotope đá vào).

"DOM ready" kích hoạt khi DOM sẵn sàng (nghĩa là đánh dấu).

$(document).ready(function(){ ... }); 

"chờ tất cả tài nguyên và sau đó kích hoạt.

$(window).load(function(){ ... }); 

Lưu ý: (bởi @DACrosby): load() sẽ không phải lúc nào bắn nếu những hình ảnh được lưu trữ (ví dụ, họ không hiện đang được nạp từ trang web - bạn đang sử dụng bản sao cục bộ của bạn).

Answer 3

Lưu ý:
1.you nên gọi hàm iso-top bên windwo kiện tải (nó sẽ đợi cho nguồn lực để được nạp) cũng bạn có thể gọi hàm trong chân.

2.xác nhận rằng cuộc gọi chức năng sau khi tải css.

$(window).load(function(){ 
    $('.iso').isotope({ 
    // options 
    itemSelector: '.item', 
    layoutMode: 'masonry' 
    }); 
    }); 

cũng có thể sử dụng hình ảnh preloader plugin cho hình ảnh tải đầu tiên
http://www.createjs.com/#!/PreloadJS

Answer 4

Có một tùy chọn để giải quyết vấn đề này. Bạn phải sử dụng một số khác nếu số grid-item của bạn chứa bất kỳ số image nào.dưới link js là

<script src='http://imagesloaded.desandro.com/imagesloaded.pkgd.js'></script> 

Sau đó gọi giữ chỗ này js dưới đây:

/*=============Code for Masonry Gallery ==============*/ 
    var grid = document.querySelector('.grid'); 
    var jQuerygrid = jQuery('.grid').isotope({ 
     itemSelector: '.element-item' 
    }); 
    var iso = jQuerygrid.data('isotope'); 
    jQuerygrid.isotope('reveal', iso.items); 

    imagesLoaded(grid, function(){ 
     iso.layout(); 
    }); 

Bạn có thể nhận được đầy đủ và rõ ràng chi tiết từ trang web chính thức của isotop. link