0

我有以下代码，我在上一个问题上得到了帮助（http://stackoverflow.com/questions/10920514/using-ajax-jquery-to-refresh-an-image）

它的工作方式是 image_feed.php 返回一个图片的 url。下面的代码片段下载了此图像，然后将其与页面上的现有图像交换。

我现在改变了我的应用程序的工作方式，并且图像的 URL 不会像以前那样改变，所以我可以绕过 image_feed.php 脚本。

所以我有一个图像，image.php?id=11，我需要下载这个图像，等待它完成加载，然后将它与#camera_image_changer 图像交换。

我正在为两件事而苦苦挣扎。一是记住脚本实际上是如何再次工作的，这样我就可以直接给它图像 URL，其次防止它缓存图像。

任何帮助将不胜感激。

谢谢

// image feed
var $img = $('#camera_image_changer'); 

 setInterval(function() {

    $.get('../helpers/image_feed.php?camera_id=11', function(data) {
    var $loader = $(document.createElement('img'));

     $loader.load(function() {
        $img.attr('src', $loader.attr('src'));
     });

     $loader.attr('src', data);

    });

}, 5000);

更新：我可能已经回答了我自己的问题。我有下面的代码并且它正在工作，这是一个好的方法吗？

// image feed
var $img = $('#camera_image_changer'); 

setInterval(function() {

        var $loader = $(document.createElement('img'));

        $loader.load(function() {
            $img.attr('src', $loader.attr('src'));
        });

        $loader.attr('src', '../helpers/image.php?<?=$resource;?>=<?=$resource_id;?>');

}, 5000);
4

1 回答 1

1

您可以删除get调用并仅使用其中的代码，为data变量分配图像的路径：

var $img = $('#camera_image_changer');   

// this delay the code execution in milliseconds
setInterval(function() { 
    var data = "path/to/image.jpg";

    // Creates an image object and pass it to jQuery return a jQuery object
    var $loader = $(document.createElement('img')); 

    // Create a callback that fires when the image finishes loading
     $loader.load(function() { 
        // assign the source of the loaded image to the target image
        $img.attr('src', $loader.attr('src')); 
     }); 

     // assign the image to load
     $loader.attr('src', data);
 }, 5000); // 5 seconds (5000 ms)

在您之前的代码中，该get方法调用页面并将内容作为data变量返回。

于 2012-07-12T16:29:27.283 回答