适当的jQuery图像加载（）？ [英] Proper jQuery image load()?

问题描述

<script type="text/javascript">
jQuery(document).ready(function(){
setTimeout(function(){
    jQuery('.my-image').each(function(){
        jQuery(this).greyScale({
            fadeTime: 200,
            reverse: false
        });
        $(this).animate({ 'opacity' : 1 }, 1000);
        $(this).load(function(){
            jQuery(this).greyScale({
                fadeTime: 200,
                reverse: false
            });
            $(this).animate({ 'opacity' : 1 }, 1000);
        });
    });
}, 200);
});
</script>

在上面的例子中，我使用greyScale（）函数将图像复制到画布并保留两个版本（灰色= default，color = hover）。

In the above example I use greyScale() function that duplicates image into canvas and keeps both versions (grey = default, color = hover).

它在99％的时间内工作正常但是当浏览器第一次运行时有时无法加载1个图像，2个图像或类似的东西。这就像加载和正常事件都无法正常工作。

It works fine 99% of the time BUT when browser first runs it sometimes fails to load 1 image, 2 images or something like that. It's like both "load" and "normal event" failed to work.

有人可以确认我做得对吗？我尝试加载该事件，如果图像已经存在或者它不在那里那么可以选择load（）来确保它在加载后执行。从逻辑上讲，这似乎是一个很好的解决方案。

Can someone confirm if I'm doing it right? I attempt to load that event if image is already there or if it's not there then there's alternative "load()" to ensure it will execute once it's loads. Logically it seems like good solution.

推荐答案

测试图像是否已加载的一种好方法是尝试访问它尺寸，如果你可以得到图像的高度或宽度，你可以假设它已加载并灰度图像。因此，您可以修改代码来执行此操作：

A good way to test whether an image has loaded or not is to try and access its dimensions, if you can get the height or width of an image, you can assume it has loaded and greyscale it. Therefore you could modify your code to do this:

jQuery('.my-image').each(function()
{
    var greyscale = function(image)
    {
        jQuery(image).greyScale({
            fadeTime: 200,
            reverse: false
        });
    }

    if ( jQuery(this).width() )
    {
        // it's loaded, greyscale its ass
        greyscale( this );
    }
    else
    {
        // wait for the load
        $(this).load(greyscale);
    }
});

在这种情况下，由于您希望图像首先是灰度，我建议以编程方式插入图像：

In this situation, since you want the image to be greyscale first I'd recommend inserting images programmatically:

如果你的< img> 标签是，请用替换它们< div> ; 标签，其中添加 data-src 属性，这将包含图像的URL。

Where your <img> tags would be, replace them with <div> tags where you add a data-src attribute, this will contain the image's URL.

当您加载文档时，请使用遍历所有< div> 标记的脚本，然后插入< img> < div> 标记内的标记，例如：

When you're document has loaded, use a script that goes through all the <div> tags and insert the <img> tags within the <div> tags, for example:

jQuery('div.my-image').each(function()
{
    var el = jQuery( this );

    // get the src for the image
    var src = el.data( 'src' );

    // start loading the image
    var img = new Image();

    img.onload = function()
    {
        // greyscale it
        jQuery(img).greyScale({
            fadeTime: 200,
            reverse: false
        });

        // append it
        el.append( img );
    }

    // load the image by setting the src
    img.src = src;
});

这篇关于适当的jQuery图像加载（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！