Question

我有一个适用于桌面设备，平板电脑和移动设备的网站。使用桌面，我网站上的图片很大。使用平板电脑，可以调整相同的图像大小。再次使用移动设备，这些相同的图像会再次调整大小。我正在使用加载到桌面移动设备上的相同图像。这对移动设备来说性能很差。我想要的是替换这些图像，并显示这些图像的缩略图。

注意：使用PHP for循环从我的数据库中检索图像。

我能做什么：

jQuery的：

$(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
    if ($(".sampleClass").css("float") == "none" ){
        // replaces images code here
    }
}

CSS：

.sampleClass {float:left;}
@media only screen and (max-width: 800px){
    .sampleClass {float:none;}
}

我认为这个代码会发生的是，将加载大图像，然后加载缩略图。因此，创造更糟糕的体验。如何在不加载大型桌面图像的情况下将图像自动替换为移动设备上的缩略图？

Answer 1

<强> HTML

<div class="bgDiv" data-desktop-image="desktop.png" data-tablet-image="Tablet.png" data-mobile-image="Mobile.png"></div>

<强> 脚本

function checkSize() {
  var windowWidth = $(window).width();
  $Element = $('.bgDiv');
  if (windowWidth > 1024) {
    currentImage = $Element.attr('data-desktop-image');
  } else if (windowWidth > 767 && windowWidth < 1025) {
    currentImage = $Element.attr('data-tablet-image');
  } else {
    currentImage = $Element.attr('data-mobile-image');
  }
  $Element.css('background-image', 'url(' + currentImage + ')');
}

Answer 2

这样的东西？

<img src="loader.gif" data-large-src="large-img-1.jpg" data-mobile-src="mobile-img-1.jpg"/>
<img src="loader.gif" data-large-src="large-img-2.jpg" data-mobile-src="mobile-img-2.jpg"/>

function checkSize(){
    if ($(".sampleClass").css("float") == "none" ){
        // init all the images with small versions of images
        $('img').each(function() {
          $(this).attr('src', $(this).attr('data-mobile-src'));  
        });
    }
    else {
      // init all the images with large versions of images
      $('img').each(function() {
        $(this).attr('src', $(this).attr('data-large-src'));
      });
    }
}

用jQuery

2 个答案: