我正在上傳HQ圖像的WordPress網站上工作。 爲了獲得更好的用戶體驗,並且不加載大圖像或不必要的圖像,我需要在平板電腦&桌面上的手機和原始尺寸上加載較小尺寸的圖像。WordPress正確的圖像大小
已經在谷歌,堆棧溢出和其他一些網站上尋找答案,但找不到任何好處。 到目前爲止唯一的和最好的答案一直是使用CSS或JavaScript和顯示:無。 問題在於所有這些東西無論如何都會加載但不可見。 我正在尋找一種解決方案,只在桌面或更高版本上載入移動設備上的移動設備大小和桌面大小的圖像。
我正在上傳HQ圖像的WordPress網站上工作。 爲了獲得更好的用戶體驗,並且不加載大圖像或不必要的圖像,我需要在平板電腦&桌面上的手機和原始尺寸上加載較小尺寸的圖像。WordPress正確的圖像大小
已經在谷歌,堆棧溢出和其他一些網站上尋找答案,但找不到任何好處。 到目前爲止唯一的和最好的答案一直是使用CSS或JavaScript和顯示:無。 問題在於所有這些東西無論如何都會加載但不可見。 我正在尋找一種解決方案,只在桌面或更高版本上載入移動設備上的移動設備大小和桌面大小的圖像。
我認爲它可以使用Ajax,JavaScript來檢測瀏覽器的寬度和負載的內容從那裏
例如內部循環,可以在腳本
<script>
var id = $('thumbnail-1').getAttr('postid');
$.ajax(get_thumbnail.php, { id: postid, width: screen.width, height:screen.height }, function($data){
$('thumbnail-1').Html($data)
}
);
</script>
得到後縮略圖
<?php while(have_post()) ?>
<div postid="<?php echo $post->ID ?>" class="thumbnail-1">
<!--load form ajax-->
</div>
<?php endwhile ?>
inside get_thumbnail.php
function($id, $width, $height){
if(width > 650){
return get_post_thumbnail($id, 'medium');
}
else{
return get_post_thumbnail($id);
}
}
你必須找到一些方法來循環javascript中的每個類ex thumbnail-1,thumbnail-2並從ajax獲取數據。
,這是一個場景,不同的圖像負載可能需要以不同的方式實現
我沒有測試此代碼應該有錯別字ALOT。我只是想寫點子
PS。我不會想到其他方式。我不會這樣做。我們住在2015年,我們得到了4G :)我只是優化我的圖片。