README

一个响应式图片加载器，它使用图片容器元素的大小来确定加载哪个图片。

公共方法

$.pufferfish.init(context, settings)

异步初始化页面中添加的图片。

$.pufferfish.reflow()

强制 Pufferfish 使用当前容器尺寸重新计算图片源。

设置

onChange

类型：function(event)

在改变图片的 src 属性之前被调用

afterChange

类型：function(event)

在改变图片的 src 属性之后被调用。如果 onChange() 中调用了 event.preventDefault()，则不会执行

对象

PufferfishImageChangeEvent

属性

element

类型：object | jQuery element

newImageSrc

类型：string

oldImageSrc

类型：string

方法

preventDefault()

阻止 Pufferfish 设置图片的 src 属性

使用示例

Pufferfish 以以下方式初始化整个页面

$(document).pufferfish();

也可以初始化特定的元素

$('.image-container').pufferfish();

也可以传递设置

$(document).pufferfish({
    'onChange': function(event){
        // Do something here
    }
});

data-pufferfish 属性包含定义，用于显示不同容器宽度的图片。始终使用第一个匹配的定义。

单个定义使用以下语法

[image/url/goes/here.jpg, (min-width: 100, max-width: 200)]

可以使用维度约束 "min-width" 和 "max-width" 来定义断点。每个定义中必须使用其中一个或两个。

多个定义用逗号分隔

[image1.jpg, (min-width: 100, max-width: 199)], [image2.jpg, (min-width: 200)]

在元素中使用时，看起来像这样。

<img data-pufferfish="[http://placehold.it/640x480, (max-width: 640)], [http://placehold.it/1200x500, (min-width: 641)]" />

可以使用 data-pufferfish-src-attr 通过图片加载器更改不同元素的属性。

在以下示例中，将图片 URL 应用到的 poster 属性中

<video src="video.mp4" data-pufferfish-src-attr="poster" data-pufferfish="[image1.jpg, (max-width: 640)], [image2.jpg, (min-width: 641)]" />

您也可以通过使用 onChange 回调覆盖 Pufferfish 的默认行为。例如，您可以使具有类 responsive-background 的元素更改其背景图片。

<div class="responsive-background" data-pufferfish="[image1.jpg, (max-width: 640)], [image2.jpg, (min-width: 641)]">
    <h2>Title</h2>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas tincidunt ipsum eu porta.
        Nam pretium scelerisque urna et porttitor. Suspendisse commodo, magna id iaculis luctus, quam enim
        bibendum felis, vel volutpat lacus ante eget lectus.
    </p>
</div>

<script>
    
    $(document).pufferfish({
        'onChange': function(event){
            
            if(event.element.is('.responsive-background')){
                event.preventDefault();
                event.element.css({
                    'background-image': 'url(' + event.newImageSrc + ')'
                })
            }

        }
    })
</script>

kyoushu / pufferfish.js

维护者

详细信息