用 jQuery 替换图像

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'));
      });
    }
}