douxi4114
2015-11-14 03:00
采纳率: 100%
浏览 448
已采纳

通过jQuery Ajax加载图像

I am creating an application which browses a large amount of pictures. At this point, that portion of the project is done and it sorts, filters, and loads the correct pictures, and even splits them into separate pages for faster loading.

This works great, but it still takes over 8 seconds to load the 25 pictures per page. I have done some research and I have concluded that using asynchronous jQuery Ajax requests would be the best to load them all at the same time as fast as possible.

Here is my code for this so far:

var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
console.log(imageArray);
console.log(imageArray.length);
for (i = 0; i < imageArray.length; i++) {
    $.ajax({
        type: 'GET',
        url: imageArray[i],
        dataType: 'image/jpg',
        async: true,
        success: function (data) {
            $("#" + i).attr("src", data);
        }
    });
}

The problem with this code is that it doesn't load nothing but an empty white square with a grey border. When I modify the code and run it in console in Chrome, data ends up being a string of jumbled up characters which I presume are the raw image data.

I have been searching for several days now, including on SO, and I have yet to find a solution which does what I need. On the contrary, I have found solutions which simply put the url into the image source using jQuery attr() which isn't what I need.

If anyone can provide any kind of solution to fix this code, or even perhaps a different and more efficient method of getting all the images, I am open to anything.

imageArray: http://pastebin.com/03tvpNey

Regards, Emanuel

图片转代码服务由CSDN问答提供 功能建议

我正在创建一个浏览大量图片的应用程序。 此时,项目的这一部分已完成,它会对正确的图片进行排序,过滤和加载,甚至将它们拆分为单独的页面以加快加载速度。

这很有效,但是 每页加载25张图片仍需要8秒钟。 我做了一些研究,我得出结论,使用异步jQuery Ajax请求最好尽可能快地加载它们。

这是我的代码所以 far:

  var imageArray =&lt;?php if(!empty($ images)){echo'[“'。implode('”,“',$ images)  。'“'';} else {echo”false“;}?&gt ;; 
console.log(imageArray); 
console.log(imageArray.length); 
for(i = 0; i&lt; imageArray.length  ; i ++){
 $ .ajax({
 type:'GET',
 url:imageArray [i],
 dataType:'image / jpg',
 async:true,
 success:function( 数据){
 $(“#”+ i).attr(“src”,data); 
} 
}); 
} 
   
 
 

此代码的问题在于它除了带有灰色边框的空白色方块外不会加载任何内容。 当我修改代码并在Chrome中的控制台中运行代码时, data 最终会成为一串混乱的字符,我认为这些字符是原始图像数据。

我现在已经搜索了好几天,包括在SO上,我还没有找到能满足我需要的解决方案。 相反,我找到了使用jQuery attr()将url简单地放入图像源的解决方案,这不是我需要的。

如果有人 可以提供任何类型的解决方案来修复此代码,甚至可能是获取所有图像的不同且更有效的方法,我对任何事情持开放态度。

imageArray http://pastebin.com/03tvpNey \ n

问候, Emanuel

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • duanlu1959 2015-11-14 03:34
    已采纳

    If you're using Base64 image data (the string of jumbled characters you mentioned), you'll need to get your img src to be something like:

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
    

    So your code should be:

    var imageArray = <?php if (!empty($images)) {echo '["' . implode('", "', $images) . '"]';} else {echo "false";} ?>;
    console.log(imageArray);
    console.log(imageArray.length);
    for (i = 0; i < imageArray.length; i++) {
    $.ajax({
        type: 'GET',
        url: imageArray[i],
        dataType: 'image/jpg',
        async: true,
        success: function (data) {
            $("#" + i).attr("src", 'data:image/png;base64,'+data);
        }
    });
    }
    

    However... I'd be very surprised if loading the images over AJAX and using the Base64 content is any quicker than using a normal <img src="path"/> approach.

    The point of AJAX is to fetch some data after the DOM is loaded. All moderns browsers will already fetch images asynchronously. I doubt you'll see any performance gain whatsoever.

    I'd suggest the more likely problem is that your 25 images... which I suppose are displayed as thumbnails... are still large, hi-res images. You should save a smaller 'thumbnail' version, and then fetch the hi-res image when/if the user clicks on the thumbnail to view the full-size one.

    Note that an element ID can start with (or be) a number. This wasn't valid in HTML4, but is perfectly fine in HTML5. However, you might have trouble with CSS rules - so you'd be better off prefixing with a letter (i.e. i1,i2,i3...).

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • douting1871 2015-11-14 03:22

    I had an issue with this a while ago, I used this code:

    function loadImage(path, width, height, target) {
        var loaded = true;
        $('<img src="' + path + '">').load(function () {
            if (loaded) {
                $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
                loaded = false;
            }
        });
    }
    

    UPDATE:

    using your images array:

    ["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"]
    

    You can do this:

    var image_array = ["20151107_140328.jpg", "20151107_140329.jpg", "20151107_141113.jpg", "20151107_141114.jpg", "20151107_141439.jpg", "20151107_141447.jpg", "20151107_141500.jpg", "20151107_205509.jpg", "20151107_205512.jpg", "20151107_213703.jpg", "20151107_213708.jpg", "20151107_213823.jpg", "20151108_143256.jpg", "20151108_143258.jpg", "20151108_143320.jpg", "20151108_143322.jpg", "20151108_143339.jpg", "20151108_143340.jpg", "20151108_143419.jpg", "20151108_143422.jpg", "20151108_143433.jpg", "20151108_143435.jpg", "20151108_143443.jpg", "20151108_143445.jpg"];
    
    for(var i = 0; i < image_array.length; i++) {
        loadImage(image_array[i], <width>, <height>, <container targeted>);
    }
    

    and in the imageLoad function:

    function loadImage(path, width, height, target) {
        var loaded = true;
        $('<img src="/path/to/image/' + path + '">').load(function () {
            if (loaded) {
                $(this).css('maxWidth', width).css('maxHeight', height).appendTo(target);
                loaded = false;
            }
        });
    }
    
    评论
    解决 无用
    打赏 举报
  • duanjianhe1388 2015-11-14 03:30

    Change your ids to id1,id2 or something similar from 1,2 and in success use this:

                $("#id" + i).attr("src", data);
    

    see why id should not start from a number:What are valid values for the id attribute in HTML?

    评论
    解决 无用
    打赏 举报