Đồng vị + Lazyload: kích thước hình ảnh

Question

Hai điều cần lưu ý trước khi tôi vạch trần vấn đề của mình: 1. Tôi không phải là lập trình viên, vì vậy tôi KHÔNG CÓ Ý TƯỞNG về những gì tôi đang làm 2. Nói chuyện với tôi như tôi ngu ngốc, và rất kiên nhẫn (xem 1.)

Được rồi, có khoảng một triệu điều sai trái trong cách trang web được thiết lập, nhưng bây giờ tôi chỉ cố gắng làm Isotope hoạt động với Lazyload . Tôi đã có thể đọc tất cả các stackoverflow duy nhất về vấn đề này, nhưng cho đến nay tôi đã không thể giải quyết vấn đề của tôi. Tôi đang sử dụng Stacey làm CMS. Về cơ bản, những gì tôi đang cố gắng đạt được tương tự như xxx.aestheticallyloyal.com (hoặc trên thực tế, www.imageworkshop.com/lazyload-portfolio), nhưng với các hình thu nhỏ có thể nhấp được sắp xếp theo phong cách Isotope/Masonry mở trong các trang dự án tương ứng của chúng. Tôi đã cố gắng nhận Infinitescroll để làm việc nhưng tôi không chắc chắn phân trang được hỗ trợ trong Stacey, do đó tôi đã từ bỏ điều đó. Nhập Lazyload.

Tôi đã đồng vị để hoạt động tốt. Tôi có thể khiến Lazyload hoạt động tốt, tách biệt. Nhưng bất cứ khi nào tôi cố gắng kết hợp cả hai, tôi thất bại thảm hại. Vấn đề là hình ảnh được tổ chức bởi Isotope trước khi chúng được nạp đầy đủ, do đó chúng không được căn chỉnh theo kích thước thực của chúng (có thể thay đổi) nhưng có chiều rộng cố định và chiều cao (tôi ổn với chiều rộng cố định, đó là điểm, nhưng chiều cao nên quy mô cho phù hợp). Nếu tôi thay đổi kích thước cửa sổ sau đó, tuy nhiên, lưới điện được điều chỉnh cho phù hợp, như nó phải.

Đây là mã Tôi đang làm việc với:

<script> 
$(function() { 
    var $window = $(window); 
    var $container = $('#container'); 
    var $imgs = $("img.lazy"); 

    $imgs.lazyload({ 
     event: 'scroll', 
     effect: 'fadeIn', 
     failure_limit: Math.max($imgs.length - 1, 0), 
     appear: function() {} 
    }); 

    $(function() { 
     $container.imagesLoaded(function() { 
      $container.isotope({ 
       onLayout: function() { 
        $window.trigger("scroll"); 
       }, 
       itemSelector: '.photo' 
      }); 
     }); 
    }); 

    $window.load(function() { 
     $container.isotope('reLayout'); 
    }); 
}); 
    </script> 

Đây có thể là sai trong rất nhiều cách ... Tôi không biết. Plus, như là, tôi nghĩ rằng reLayout đang làm hoàn toàn không có gì, và từ đó tôi thực sự không biết đi đâu. Ai có thể xem xét trang web của tôi flow.blukaet.com và cho tôi biết làm thế nào để sắp xếp đống lộn xộn này? (Không bao giờ thấy menu bên trái, tôi thậm chí chưa bắt đầu nhìn vào đó). Cảm ơn.

CẬP NHẬT # 1

Tôi đã cố gắng sử dụng một kịch bản khác nhau Lazyload gọi Fasterize. Mọi thứ dường như chỉ có giá vé tốt hơn, nhưng tôi vẫn gặp sự cố khi hiển thị hình ảnh xuất hiện dưới màn hình đầu tiên theo cách chính xác. Về cơ bản, mọi thứ tải trong khung nhìn đều được sắp xếp tốt bằng Đồng vị, nhưng các hình ảnh còn lại không được thêm vào dựa trên kích thước thực, cuối cùng, có thể nhìn thấy của chúng. Tôi cần phải kích hoạt một cái gì đó trong Isotope để làm cho nó sắp xếp lại các mục mới sau khi chúng được nạp. Tôi không biết liệu nó có thể xảy ra hay không. Ai có thể giúp được không? Đây là trang web nơi bạn có thể xem những gì đang diễn ra: flow.blukaet.com (Mã ở trên không còn thực tế nữa).

CẬP NHẬT # 2

Vì vậy, đây là mã sửa đổi nhờ câu trả lời cung cấp dưới đây (còn, điều này được sử dụng fasterize/lazyload như trái ngược với của appelsiini lazyload):

<script> 
$(window).load(function() { 

var $container = $('#container'); 
var $imgs = $("img"); 

$container.imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector: '.photo' 
    }); 
}); 

$(window).scroll(function() { 
    $container.isotope('reLayout'); 
}); 
}); 
</script> 

Nó không siêu mịn, nhưng nó hoàn thành công việc.

Trước đây tôi đã cố gắng một cái gì đó dọc theo dòng:

<script> 
$(function() { 

var $container = $('#container'); 
var $imgs = $("img"); 

$container.imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector: '.photo' 
    }); 
}); 

$imgs.load(function() { 
    $container.isotope('reLayout'); 
}); 
}); 
</script> 

nào thực sự chạy mượt mà hơn nhiều, nhưng bằng cách nào đó đã đem lại cho các lỗi giao diện điều khiển sau:

cannot call methods on isotope prior to initialization; attempted to call method 'reLayout'

Vì vậy, tôi không biết.

Một điều cần lưu ý là mã hoạt động trong FF và Opera. Rõ ràng Safari bỏ qua việc tải xuống hoàn toàn. Tôi chưa thử nghiệm trong Chrome và IE. Nếu ai đó muốn kiểm tra: flow.blukaet.com

Answer 1

Huzzah! Tôi nghĩ chúng ta có một người chiến thắng cuối cùng. Tôi nhét thêm một nửa giải pháp mà tôi đã tìm thấy - thông qua thử và sai, hãy nhớ bạn, bởi vì tôi vẫn chưa có manh mối về những gì tôi đang làm - và tôi nghĩ cuối cùng tôi cũng có được quyền này. Bàn điều khiển không còn trả lại lỗi khởi tạo và mã dường như hoạt động nhiều hơn hoặc ít hơn một cách chính xác (tôi nghĩ vậy ?!).

<script> 
$(document).ready(function() { 

    var $container = $('#container'); 
    var $imgs = $("img"); 

    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.photo' 
     }); 
     $imgs.load(function() { 
      $container.isotope('reLayout'); 
     }); 
    }); 
}); 
</script> 

Vì vậy, 'reLayout' không xảy ra khi cuộn ảnh, theo cách này, chúng sẽ không bị kẹt nếu cuộn không đi qua toàn bộ.

Trong Safari Lazyload vẫn làm bất cứ điều gì nó muốn, và như thường lệ tôi không thể thử nghiệm trên Chrome và IE, nhưng trong FF và Opera nó có vẻ là ok. Kiểm tra flow.blukaet.com để biết ví dụ hoạt động.

Answer 2

Tôi có cùng sự cố với lưới phản hồi. Kiểm tra hình ảnh này, lưới ở bên trái và bị hỏng ở bên phải.

Lưới được phá vỡ bởi vì chiều cao cụ thể cho hình ảnh là cần thiết và quá trình đáp ứng vượt qua giá trị chiều cao vào "auto".

Vì vậy, ở đây chúng tôi phải chuyển tiếp khi hình ảnh được tải (đưa ra chiều cao cụ thể để xử lý).

Còn bây giờ là giải pháp tôi thấy là relayout trên scrool:

$(window).scroll(function() { 
     $container.isotope('reLayout'); 
}); 

nhưng tôi chắc chắn có một cách tốt hơn để làm điều này.

Và hãy thử độ cao cho lưới, thấy nó tuyệt vời và nhẹ hơn những người khác. http://yconst.com/web/freetile/

Answer 3

Trong khi tôi gặp vấn đề tương tự và không thể giải quyết, tôi nhận ra đó chỉ là một cảnh báo. Vì vậy, tôi chỉ đơn giản là vô hiệu hóa nó bằng cách bình luận tắt dòng đăng nhập console trong tệp "jquery.isotope.min.js" (hoặc jquery.isotope.js)

var logError = function(message) { 
    if (window.console) { 
    //window.console.error(message); 
    } 
};