Как добиваться того, чтобы они не загрузили некие элементы в подвижной версии веб сайта?

Я попытался со средним показателем queries и display:none, элементы исчезают, но проверяя Network инспектора я вижу, что они загружаются равно. Идея состоит в том, чтобы зарабатывать скорость в мобильных телефонах снимая элементы, взвешенные, чтобы ускорять груз. Спасибо.

3
задан 27.01.2017, 16:09
7 ответов

С css всегда aparecerÃ: контент и después он это скроет, где ты это увидел, лучший opci¦n иметь исключительный веб сайт для m¦viles в этом случае, который ты просишь для "зарабатывать больше скорость в m¦viles"

, soluci¦n в Javascript значит обнаруживать ширину экрана и в на основании этой ширины делать переадресацию в твой исключительный сайт для m¦viles, это могут быть не очень рекомендуемый soluci¦n

это пример с Javascript , полученным от desarrollowe.com

if (BrowserDetect.browser == "Firefox") { 
    document.write("<LINK REL='stylesheet' HREF='estilo_firefox.css' TYPE='text/css'>"); 
} 
else 
{ 
      if (BrowserDetect.browser == "Explorer"){ 
        if (BrowserDetect.version>=7){ 
          document.write("<LINK REL='stylesheet' HREF='estilo_ie7.css' TYPE='text/css'>"); 
        }else{ 
          document.write("<LINK REL='stylesheet' HREF='estilo_ie6.css' TYPE='text/css'>"); 
        } 
      }else{ 
          if (BrowserDetect.browser == "Opera"){ 
            if (BrowserDetect.version<9){ 
              document.write("<LINK REL='stylesheet' HREF='estilo_opera.css' TYPE='text/css'>"); 
            }else{ 
              document.write("<LINK REL='stylesheet' HREF='estilo_opera9.css' TYPE='text/css'>"); 
            } 
          }else{ 
            document.write("<LINK REL='stylesheet' HREF='estilo_otros.css' TYPE='text/css'>"); 
          } 
      } 
}

Другая форма состоит в том, чтобы обнаруживать от стороны сервера, что тип браузера соглашается asà - ты избегаешь посылать reenderizado pÃ: gina контент, который ты не хочешь увидеть, никогда я это не пробовал .

le¦-do, что с PHP используя librer¦ - в php-browscap , чтобы использовать ее со следующим c¦digo:

require 'vendor/autoload.php';
use phpbrowscapBrowscap;

$bc = new Browscap('cache');
/** @var stdClass $current_browser */
$current_browser = $bc->getBrowser();

сейчас уже у тебя есть stdClass в $ current_browser со всем доступным informaci¦n browser.

, Чтобы принимать решения из-за каждого обнаруженного браузера, ты можешь использовать следующий c¦digo:

$curr_br = $current_browser->Browser;
$CoolBrowsers = $curr_br == 'Chrome' || $curr_br == 'Firefox';

if ($CoolBrowsers) {
  add_asset('css', 'just-for-cool-browsers.css');
  $output = renderAdvancedLayout();
}
else {
  add_asset('css', 'just-for-bad-bad-browsers.css');
  $output = renderBasicLayout();
}

También ты можешь обнаруживать, если estÃ: n соглашаясь с m¦vil или tablet, включенного знания, если это Android, IOS, versi¦n SO, и т.д.

Есть другие формы según, как ты считал разработанным твой сайт.

Informaci¦n, полученный от ecapy.com

2
ответ дан 24.11.2019, 11:25

Я не эксперт, но мне приходят в голову два решения, одна используя tecnolog¦ - в jQuery , с этой tendr¦-схвати получать ширину экрана, такой очень сходный как это hac¦-схвати с query в css , но сейчас с jQuery , после зная tamaño об экране, ты используешь один if или такой один switch как структура контроля, чтобы строить различно твой Веб в различных tamaños.

Другая форма, которая ты podr¦, - чтобы служить, с java рукописный шрифт перед тем, как загружать страницу консультироваться tamaño экрана, если m¦viles, что это переслал в суб-домен, у которого была бы та же страница versi¦n m¦vil, иначе не пересылала в ningún сторону и позволяла загружать контент настоящей страницы. Ÿ‘

0
ответ дан 24.11.2019, 11:25

Пока этикетка <img> этот в твоем этом c¦digo будет загружена.

того, что я предлагаю тебе, состоит в том, чтобы ты загрузил из-за недостатков все твой изображение, имейте в Вашем признаке src то же изображение 1x1 px и в признаке восходи, например восходит - src размести маршрут истинное изображение.

этим и как только я загрузил одинокий сайт загрузит изображение pequeña 1x1 px и потом с небольшим количеством языка сценариев JavaScript менять признак src на стоимость признака датирует - src из imÃ: гены, которые ты действительно хотел бы загрузить в m¦vil.

присоединил Тебе пример с jQuery:

$('img[data-src]:not(.hide-on-movil)').each(function () {
	var $this = $(this);
    $this.attr('src', $this.data('src'));
});
.hide-on-movil {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<img src="http://placehold.it/1x1" data-src="http://placehold.it/300?text=Not+show+in+Movil" class="hide-on-movil">

<img src="http://placehold.it/1x1" data-src="http://placehold.it/300?text=Show+in+Movil">

Надеялся, что он стоит тебе для того, чтобы понять идею и тебе полезен.

Удача и Привет!

0
ответ дан 24.11.2019, 11:25

Итак, тот факт, что ты установил один display:none, он не означает, что элемент не существовал так как буквально переведенный, существует больше не показан и следовательно, также грузит. Помни, что HTML - estÃ: костариканский и элементы не созданы искусством магии, estÃ: n воплощенные в c¦digo. Ло único, что я могу рекомендовать тебе использовать Javascript, так как с ними ты можешь создавать новые элементы в DOM, что раньше не exist¦-an в c¦digo, podr¦-эксперте способствовать как вид condici¦n тому, чтобы, если способ visualizaci¦n подвижный, он не поверил, по-другому, что элемент создал вышеупомянутый элемент. Ты подпираешь, вместо того, чтобы использовать display:none, я рекомендую тебе использовать framework CSS, как materialize или bootstrap, гораздо более легко скрывать и показывать элементы используя классы самой

0
ответ дан 24.11.2019, 11:25

С display:none, просто ты говоришь, что он не появился, но будет там Ваше присутствие элемента, серьезной альтернативы удалять полностью этот элемент, когда будет находиться в определенный экран (ширина экрана) , как показываешь ты с @media querys, я оставляю тебе код, который удаляет элементы посредством id.

function eliminarPorId(id) {
    var elemento = document.getElementById(id);
    return elemento.parentNode.removeChild(elemento);
}




eliminarPorId("segundoDiv");
#primerDiv{
background:red;
  width:40px;
  height:40px;
}
 #segundoDiv{
background:blue;
  width:40px;
  height:40px;
}
.tercerDiv{
background:orange;
  width:40px;
  height:40px;
}
<div id="primerDiv"></div>
<div id="segundoDiv"><img src="http://cdn01.ib.infobae.com/adjuntos/162/imagenes/014/014/0014014674.jpg" alt="Smiley face" height="42" width="42"></div>

<div class="tercerDiv"></div>

Сейчас видя в инспектор кода: не существует div с id=segundoDiv (потому что он был удален)

introducir la descripción de la imagen aquí

, хотя он загружается даже - , из-за которых я не используюсь какие-то условия , серьезное решение делать что-то похожим на следующее, повторять из-за всех divs страницы.

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
  if(divs[i].className!="divsNecesarios"){
    var elemento = document.getElementsByClassName(divs[i].className);

while(elemento[0]) {
    elemento[0].parentNode.removeChild(elemento[0]);
}
  
  }
}
    #primerDiv{
    background:red;
      width:40px;
      height:40px;
    }
     #segundoDiv{
    background:blue;
      width:40px;
      height:40px;
    }
    .divsNecesarios{
    background:orange;
      width:40px;
      height:40px;
    }
    <div id="primerDiv" class="noNecesarios"></div>
    <div id="segundoDiv" class="noNecesarios"><img src="http://cdn01.ib.infobae.com/adjuntos/162/imagenes/014/014/0014014674.jpg" alt="Smiley face" height="42" width="42" class="cualquiera"> </div>

    <div class="divsNecesarios"></div>
    <div class="divsNecesarios"></div>
0
ответ дан 24.11.2019, 11:25
  • 1
    Segú n я tardarí в сайт в том, чтобы быть загруженным равным способом или даже это harí чтобы опаздывать má s, y хорошо tendrí которого иметь вкус даже así когда, если выполнять funció n, и когда нет – JuankGlezz 27.01.2017, 17:17
  • 2
    @JuankGlezz, если он это использует для небольшого количества элементов?, все же это альтернатива в Вашу проблему элементы исчезают, но проверяя Network инспектора я вижу, что загружаются равно – x-rw 27.01.2017, 17:21
  • 3
    поэтому я сказал tendrí которого иметь вкус даже así когда, если выполнять funció n, и когда не могут исправлять это обнаруживая в ширине экрана – JuankGlezz 27.01.2017, 17:27
  • 4
    Спасибо за помощь. Я попытался помещая изображение в #segundoDiv и segú n инспектор загружает изображение. Está делая то же самое что display:none... – agujex 27.01.2017, 17:34
  • 5
    @x-rw, но если ты идешь в pestañ в Network и внизу в Img, обрати внимание, что появляется изображение с tamañ или и время груза – agujex 27.01.2017, 18:03

única формирует, что я вижу реализации того, что ты желаешь, - используя этот pequeño прием (исходя из c¦digo @x-rw, чтобы не быть должным писать все с 0):

function regenerar(id) {
  var media = window.matchMedia("(min-width: 800px)");
  var elementos = document.getElementsByTagName("img");
  for (i = 0; i < elementos.length; i++) {
    if (media.matches) {
      var srcc = elementos[i].getAttribute("srcc");
      if (srcc !== null) {
        elementos[i].src = srcc;
      }
    } else {
      if (elementos[i].src == "") {
        elementos[i].src = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
      }
    }
  }
}

/* Todos los navegadores excepto IE < 9 */
document.addEventListener("DOMContentLoaded", regenerar, false);
#primerDiv {
  background-color: red;
  width: 40px;
  height: 40px;
}

#segundoDiv {
  background-color: blue;
  width: 40px;
  height: 40px;
}

.tercerDiv {
  background-color: orange;
  width: 40px;
  height: 40px;
}
<div id="primerDiv"></div>
<div id="segundoDiv"><img src="http://cdn01.ib.infobae.com/adjuntos/162/imagenes/014/014/0014014674.jpg" alt="Smiley face" height="42" width="42"></div>
<div class="tercerDiv"><img srcc="http://mirrors.creativecommons.org/presskit/icons/cc.large.png" alt="Smiley face" height="384" width="384"></div>

Мы Регистрируем funci¦n, что serÃ: вызов, когда документ будет загружен. В этом моменте мы анализируем все imÃ: гены документа и мы обмениваемся Вашим признаком srcc из-за src s¦lo, если éste estÃ: определенный.

мне не нравится много soluci¦n, но я верю в то, что podr¦, - чтобы помогать тебе получать то, что ты желаешь.

0
ответ дан 24.11.2019, 11:25

Тема imÃ: гены resolvà - используя этикетку picture с признаком srcset. Потом с javascript для того, чтобы они не загрузили другие элементы, взвешенные как видео или iframes. Элементы metà - в div с display:none, чтобы прибывать в некой форме к soluci¦n формулируемого вопроса.

Выполнили c¦digo на полном экране, уменьшите экран по крайней мере 500px, освежите и podrÃ: оценивать в Network инспектора, которого не загружают элементы. iframe начинает грузить, но отменяется сразу.

screen_resize()

function screen_resize() {
  var h = parseInt(window.innerHeight);
  var w = parseInt(window.innerWidth);

  if (w <= 500) {
    var iframe = document.querySelector('iframe');
    iframe.parentNode.removeChild(iframe);
    var video = document.querySelector('video');
    video.parentNode.removeChild(video);

  }

}
div {
  display: none
}
@media (min-width: 500px) {
  div {
    display: block
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<div>
  <picture>
    <source srcset="https://cdn.pixabay.com/photo/2016/01/10/21/06/eye-1132531_960_720.jpg" media="(min-width: 500px)" />
    <img srcset="" width="320" height="240" />
  </picture>

  <video width="320" height="240" controls>
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">
  </video>

  <iframe width="300" height="180" src="https://www.youtube.com/embed/qa2SaMbt5xg" frameborder="0" allowfullscreen></iframe>
</div>
</html>
0
ответ дан 24.11.2019, 11:25

Теги

Похожие вопросы