Пример, показывающий, как работает мобильная связь

Question

Я просматриваю сайт mobify.js некоторое время, но я не понимаю преимуществ его использования. (Я в тупике, чтобы понять, почему можно заменить все изображения на странице с помощью изображения GrumpyCat?).

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

Я сделал следующие задачи до сих пор: 0. В комплекте mobify.js информация заголовка 1. Использовал mountains.jpg и forest.jpg изображение в моем хостинговых сайтах (страница содержит только эти два изображения) 2 Запросите страницу с настольного компьютера, с планшета (Samsung Galaxy 10 дюймов), с мобильного телефона Android. 3. Во всех трех случаях я вижу одно и то же изображение, загружаемое, размер изображения остается неизменным во всех случаях.

Я понимаю, что магия уменьшения размера не может произойти «на лету», но как мне это достичь?

Answer 1

Я понимаю, что пример Grumpy Cat немного нахальный, но та же концепция применяется для решения вашей проблемы. Вместо замены изображений изображениями Grumpy Cat вы можете написать некоторую логику, чтобы заменить изображения изображениями с более низким разрешением (то есть mountains-320.jpg и forest-320.jpg).

С помощью Mobify.js вам необходимо написать адаптацию в фрагменте JavaScript, который вы добавили на свой сайт. Таким образом, чтобы загрузить изображения меньшего размера для мобильного телефона, вы можете определить путь к более низкое разрешение изображения в оригинальном HTML, как это:

<img src="mountain.jpg" data-mobile-src="mountain-320.jpg" /> 
<img src="forest.jpg" data-mobile-src="forest-320.jpg" /> 

Затем в сниппет JavaScript, вы можете изменить его, чтобы захватить изображение в data-mobile-src атрибут вместо так:

 if (capturing) { 
      // Grab reference to a newly created document 
      Mobify.Capture.init(function(capture){ 
       // Grab reference to the captured document in progres 
       var capturedDoc = capture.capturedDoc; 

       var imgs = capturedDoc.getElementsByTagName("img[data-mobile-src]"); 
       for(var i = 0; i < imgs.length; i++) { 
        var img = imgs[i]; 
        var ogImage = img.getAttribute("x-src"); 
        var mobileImage = img.getAttribute("data-mobile-src"); 
        img.setAttribute("x-src", mobileImage); 
        img.setAttribute("old-src", ogImage); 
       } 

       // Render source DOM to document 
       capture.renderCapturedDoc(); 
      }); 
     } 

Тогда вы увидите, что мобильный сайт будет загружать и оказывать mountain-320.jpg или forest-320.jpg, но это не будет загружать mountain.jpg или forest.jpg.

Просто из любопытства, на каком сайте вы хотите использовать Mobify.js?