Safari中簡單同位素示例的問題

我正在考慮再次重做我的主頁，並且認爲使用同位素使它變得更加流行。我過去曾嘗試過同位素，並因無法按照我的想法工作而感到沮喪。這一次，我試圖做一些簡單的事情。我做了一個super simple example來說明我的最新問題。除非您調整瀏覽器窗口的大小，否則圖像不會顯示在Safari和其他某些瀏覽器中。Safari中簡單同位素示例的問題

下面是我的代碼示例，div用PHP寫入屏幕。我可能會切換到UL和LI，但是因爲HTML只是在瀏覽器窗口調整大小之前才顯示出來......是否有一些JavaScript強制重繪/重新加載我應該這樣做，在Isotope文檔中沒有任何關於我的內容在我的MacBook Pro中遇到過，並且演示在Safari上運行。

我嘗試了其他幾個瀏覽器，它的工作原理與IE8相似，但我的工作機器上的Firefox似乎和Safari一樣反應。

<div id="contents"> 
<h1>Making the Internet better since 1995</h1> 
<!-- Masonry test code --> 
<div id="container"> 
    <div class="item"><a href="http://www.flickr.com/photos/mminghella71/944/in/[email protected]" title="Bolt Action Heer Infantry Squad"><img src="http://farm6.staticflickr.com/5333/944_0e9f4db858_s.jpg" alt="Bolt Action Heer Infantry Squad" border="0" /></a></div> 
</div> 
<script> 
$(function(){ 

    var $container = $('#container'); 

    $container.isotope({ 
    itemSelector: '.item', 
    masonry: { 
     columnWidth: 75 
    } 
    }); 

}); 
</script>

來源

2013-08-04 Muskie

我沒有在這個問題上花太多時間，但我決定在我的工作箱上檢查它，它在IE8中仍然是默認瀏覽器，但它在Windows上的Firefox上不起作用。做了什麼選擇性地破壞同位素？ – Muskie

我做了一個更小的例子，因爲Safari不會產生任何錯誤，它只是不顯示圖像。除了H1標籤外，其他產品都可以使用。在我的其他CSS也許... http://www.muschamp.ca/blankExample.php，錯誤是不是在上面的代碼。 – Muskie

當我調整大小時，圖像出現在Safari中，但是如果我只是重新加載圖像，則不可見。令人失望... – Muskie

我感動了。我現在擁有一切在www.muschamp.ca上工作的方式。雖然我嘗試了很多，但我沒有對Isotope或JavaScript/CSS進行任何更改。我最終解決了這個問題所做的重大改變是使用PHP來確定圖像的高度和寬度。 Isotope文檔說它沒有這個工作，但根據我的經驗，如果您提供JavaScript精確的圖像尺寸，效果會更好。

我不確定使用getimagesize（）http://php.net/manual/en/function.getimagesize.php時性能指標有多大，但在寫出圖像標記之前添加一個調用，每次都會產生完美的呈現效果。作爲折衷方案，我會獲取略少的圖像/ RSS源。

希望我的試驗和錯誤和簡單的演示可以幫助一些人。

來源

2013-11-04 16:36:28 Muskie

你有沒有嘗試把你的函數放入Windows.load？

$(window).on('load', function() { 
var $container = $('#container'); 

    $container.isotope({ 
    itemSelector: '.item', 
    masonry: { 
     columnWidth: 75 
    } 
    }); 
});

來源

2013-09-17 02:15:15 Evonet

我有點感動，理解它在每個瀏覽器中都不能很好地工作。但我可以試試這個。 – Muskie

我做了你的改變，它讓Safari變得更糟。現在，它不僅沒有正確佈局，而且在調整事物大小時也沒有正確佈局...... – Muskie

我認爲速度是一個因素，從我以外的服務器拉取圖像似乎是問題的一部分。你的JavaScript改變絕對沒有幫助，同位素是非常聰明的，但它需要現代瀏覽器，並顯然是一個快速的互聯網連接，如果你要拉和佈局一堆圖像。 – Muskie

Safari中簡單同位素示例的問題

回答

相關問題