Question

我正在建立一个网站，该网站将在平板电脑上本地运行，客户端正在为新业务潜在客户提供服务。因此，我无法使用任何PHP。根据平板电脑的方向是纵向还是横向，设计是必须的，我需要换出一些图像。为了清楚我需要交换图像;他们不能简单地调整大小。

我写了以下HTML：

<img src="img/derp/2.jpg"/>

和jQuery：

//DETECT THE INITIAL SCREEN WIDTH AND CHANGE THE PATH TO LOAD THE APPROPRIATE IMAGES

    if ($(window).width() < 960) {
        $("img").each(function() {
            $(this).attr("src", $(this).attr("src").replace("img/derp", "img/port"));
        });
    }

    else {
        $("img").each(function() {
              $(this).attr("src", $(this).attr("src").replace("img/derp", "img/land"));
        });

    }


//DETECT THE CHANGED SCREEN WIDTH AND SWITCH THE IMAGE PATH IF NECESSARY

$(window).on('resize', function() {

        if ($(window).width() < 960) {
            $("img").each(function() {
                  $(this).attr("src", $(this).attr("src").replace("img/land", "img/port"));
            });

        } else {
            $("img").each(function() {
                  $(this).attr("src", $(this).attr("src").replace("img/port", "img/land"));
            });
        }
});

这一切都运行良好，除了它最初在切换到正确的图像目录之前在控制台中抛出404。我已经尝试在HTML的顶部和顶部加载此脚本，但它没有任何区别。

有没有人知道我可以在浏览器尝试加载图片之前让jQuery改变图像路径，这样它就不会给我404？

Answer 1

车轮已经发明了。

<强> CSS3

<img src="image.jpg"
 data-src-600px="image-600px.jpg"
 data-src-800px="image-800px.jpg"
 alt="">

查看更多：http://css-tricks.com/techniques-for-context-specific-images/

Answer 2

更容易的解决方案是使用媒体查询而不是用jQuery替换图像。通过CSS将图像设置为背景，并根据屏幕大小应用不同的规则。它会更快地工作，当一个图像被另一个图像替换时，不会有“闪烁”/页面重绘。

jQuery可以在图像加载之前改变图像路径吗？

2 个答案: